A boilerplate for fullstack web development using "MongoDB ⦾ Express.js ⦾ Next.js ⦾ Node.js". It Includes React.js, Redux, RTK Query, SASS, TailwindCSS, AntDesign.
Make sure that Node.js and MongoDB are installed on the local machine.
git clone https://github.com/johnlodan/nextjs-expressjs-boilerplate.gitFor both web and api folder, Rename .env.local to .env
- To setup and run frontend (Next.js), open a new terminal.
cd web # Web Directory
npm install # Install Packages
npm run dev # To Run NextJs- Now, after the setup of the frontend, leave it running and open again a new terminal to setup and run the backend (Express.js, MongoDB).
cd api # Api Directory
npm install # Install Packages
npm start # To Run ExpressJS- [Generate Fake Data] Both frontend and backend are now running. Open again a new terminal and run this (once). [terminate this terminal once done], and let the frontend and backend running.
cd api # Api Directory
npm run faker # RUN ONCE, This will generate fake data to the database.- [Login] Go to the browser http://localhost:3000
email: admin@gmail.com # Email
password: 123456 # Password- Frontend(Next.js) and Backend(Express.js, MongoDB) Integrations.
- Server Side Rendering(SSR) and Client Side Rendering(CSR).
- JWT (JSON WEB TOKEN) to authenticate and transmit information to the protected routes.
- SASS (Syntactically Awesome Stylesheets) that extends CSS with features that make styling web pages easier and more efficient.
- Ant Design (AntD) to provide a set of high-quality components for web applications. It is widely used for its clean design, flexibility, and ease of use.
- Redux (State Management Library) to store all the application data in a single location (Centralized State).
- RTK Query for data fetching and caching tool built into Redux Toolkit. It simplifies API calls by handling caching, re-fetching, and state management automatically.
- Fully CRUD (Create, Read, Update, Delete) functionality.
- Support Theming (Light, Dark, Green ,Etc).
MIT