Cremablog is a markdown-based blog website project that is created using the MERN stack. The project aims to help users learn and practice the MERN stack effectively. The project is divided into three parts: backend, frontend, and design. The backend is created using Node.js, TypeScript, Express, and MongoDB. The frontend is created using React and TypeScript. The design is created using HTML, CSS, and JavaScript. The project is open-source and contributions are welcome.
- Create, read, update, and delete blog posts
- Login and signup
- User authentication/authorization
- User roles
- User profile
- Search blog posts
- Dark mode
- Responsive design
- Node.js
- TypeScript
- Express
- MongoDB
- React
- HTML
- CSS
- JavaScript
- Clone the repository
- Install the dependencies
- Create a
.envfile in the backend folder and add the following environment variables:
NODE_ENV=development # or production
PORT=5000
EXPRESS_RATE_LIMIT_WINDOW_MINUTES=15
EXPRESS_RATE_LIMIT_MAX=100
MONGODB_URI=your_mongodb_uri
JWT_SECRET=your_jwt_secret
JWT_EXPIRES_IN=30
- Run the backend server
- Create a
.envfile in the frontend folder and add the following environment variables:
VITE_API_URL=your-backend-url
VITE_PORT=your-frontend-port # Generally 3000- Run the frontend server
- Create a new blog post (you need to login first and have the
authororadminrole) - Read a blog post
- Update a blog post (you can only update your own blog posts)
- Delete a blog post (you can only delete your own blog posts unless you have the
adminrole) - Login
- Signup
- Search blog posts
- Switch to dark mode
This project is licensed under the MIT License - see the LICENSE file for details.
(for /template and /frontend)
Because of Tailwind, you may see a warning message. To fix this, you may create a .vscode folder in the /template and /frontend directories and create a settings.json file in the .vscode folder. Add the following code to the settings.json file.