MERN Stack Project Template

Overview

This is a comprehensive MERN (MongoDB, Express, React, Node.js) stack project template designed for quick setup and flexible development. It features a standard CommonJS Express backend, an ESModule React frontend built with Snowpack, MongoDB Atlas integration, and Docker support.

Key Features

• Express backend with CommonJS
• React frontend with TypeScript and ESModule support
• Snowpack for frontend build
• MongoDB Atlas integration
• Docker support for development and production
• Comprehensive linting and formatting setup
• Testing frameworks for both frontend and backend
• Project documentation and management tools

Technologies

Backend

• Node.js
• Express
• MongoDB (with Mongoose)
• Jest for testing

Frontend

• React
• Snowpack
• Jest and React Testing Library

DevOps & Tools

• Docker
• ESLint
• Prettier
• Stylelint
• Husky for git hooks

Project Structure

.
├── README.md
├── TODO.md
├── UserStories.md
├── commitlint.config.js
├── docker/
│   ├── docker-compose.dev.yml
│   └── docker-compose.yml
├── docs/
├── node/
│   ├── Dockerfile
│   ├── eslint.config.js
│   ├── jest.config.js
│   ├── package.json
│   └── src/
│       ├── config/
│       ├── controllers/
│       ├── middleware/
│       ├── models/
│       ├── routes/
│       ├── server.js
│       └── views/
├── package.json
├── project/
│   ├── ProjectChecklist.md
│   ├── ProjectJournal.md
│   └── ProjectNotes.md
└── react/
    ├── Dockerfile
    ├── README.md
    ├── babel.config.mjs
    ├── eslint.config.mjs
    ├── jest.config.mjs
    ├── package.json
    ├── postcss.config.mjs
    ├── snowpack.config.mjs
    ├── src/
    │   ├── App.tsx
    │   ├── components/
    │   ├── hooks/
    │   ├── pages/
    │   ├── services/
    │   └── utils/
    ├── stylelint.config.mjs
    └── tsconfig.json

Setup Instructions

1. Clone the repository:

   git clone [repository-url]
   cd [project-name]

2. Install dependencies:

   npm install
   cd node && npm install
   cd ../react && npm install

3. Set up environment variables:

   • Copy .env.example to .env in the root directory
   • Fill in the required environment variables, especially the MongoDB URI

4. Start the development servers:

   • For backend: cd node && npm run dev
   • For frontend: cd react && npm run dev

Running with Docker

1. Ensure Docker and Docker Compose are installed on your system.

2. For development:

   docker-compose -f docker/docker-compose.dev.yml up
   

3. For production:

   docker-compose -f docker/docker-compose.yml up
   

Testing

• Backend tests: cd node && npm test
• Frontend tests: cd react && npm test

Linting and Formatting

• Lint backend: cd node && npm run lint
• Lint frontend: cd react && npm run lint
• Format project: npm run prettier (from root directory)

Project Documentation

• Use the docs/ directory for project-wide documentation
• The project/ directory contains files for project management:
  • ProjectChecklist.md: Track project milestones and tasks
  • ProjectJournal.md: Keep a development journal
  • ProjectNotes.md: Misc. project-related notes

Contributing

This project is intended to be a template for your MERN stack projects. As such, direct contributions to this template are not typically accepted. However, you can engage with this project in the following ways:

1. Star the Repository: If you find this template useful, please star it on GitHub. This helps others discover the project.

2. Fork the Repository: Feel free to fork this project and use it as a starting point for your own projects. Customization and improvements for your specific needs are encouraged.

3. Issues: If you discover bugs or have suggestions for improvements, please open an issue on the GitHub repository. Provide as much detail as possible to help understand your concern or idea.

4. Pull Requests: While not typically accepted, if you believe you have a critical improvement that would benefit all users of this template, you may submit a pull request. Please note:

   • All commits must be signed.
   • Pull requests will be reviewed at the maintainer's discretion.
   • There is no guarantee that pull requests will be accepted or reviewed in a timely manner.

Remember, the best way to utilize this project is to fork it and adapt it to your needs. Your innovations on your fork are always welcome!

License

This project is licensed under the MIT License. This means:

• You are free to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software.
• You must include the copyright notice and the permission notice in all copies or substantial portions of the software.
• The software is provided "as is", without warranty of any kind.

For the full license text, please see the LICENSE file in the project repository.

While this is an open-source project and free to use, please be aware that if you intend to use this template for commercial purposes, you should review the licenses of all included dependencies to ensure compliance with their terms.