In order to run this project locally, simply fork and clone the repository or download as zip and unzip on your machine.
- Open the project in your prefered code editor.
- Go to terminal -> New terminal (If you are using VS code)
- Split your terminal into two (run the Frontend on one terminal and the Backend on the other terminal)
In the first terminal
$ cd client
$ npm install (to install frontend-side dependencies)
$ npm run start (to start the frontend)
In the second terminal
- cd server and Set environment variables in .env under ./server.
- Create your mongoDB connection url.
- Supply the following credentials.
# --- Config.env ---
PORT =
DB_URI =
JWT_SECRET =
NODE_ENV =
SALT_ROUNDS =
# Nodemailer
APP_WEBSITE_NAME=
APP_DOMAIN=
APP_MAIL_HOST=smtp.gmail.com
APP_MAIL_PORT=465
APP_MAIL_PASSWORD=your_password
APP_MAIL_USER=example@gmail.com
# --- Terminal ---
$ npm install (to install backend-side dependencies)
$ npm start (to start the backend)
- User registration and login
- Authentication using JWT Tokens
- Article searching and pagination
- CRUD operations (Article create, read, update and delete)
- Upload profile ımages and article ımages to the server
- Commenting on the article
- Skeleton loading effect
- Responsive Design
This project was created using the following technologies.
- React js - JavaScript library that is used for building user interfaces specifically for single-page applications
- Vite- to create react application.
- Redux Toolkit - is a modern, efficient, and easy-to-use library for managing application state in a React application.
- React Hooks Form - React Hook Form is a simple and powerful library for managing forms in a React application to easily handle form state and validation.
- React Query - is a simple and efficient library for managing data fetching in a React application. It provides a high-level API for fetching data, caching it, and refetching it when necessary, making it easy to build performant, reactive applications.
- React Icons - React Icons is a collection of reusable vector icons for React, designed to be easy to integrate and customize.
- react-router-dom - To handle routing
- axios - For making Api calls
- Tailwind - For User Interface
- Tiptap - its full control of your text editor experience. It’s customizable, comes with a ton of extensions
- uuid - For random id generator
- React icons - Small library that helps you add icons to your react apps.
- React Hot Toast - Small library that helps you add icons to your react apps.
- Node js -A runtime environment to help build fast server applications using JS
- Express js -The server for handling and routing HTTP requests
- Mongoose - For modeling and mapping MongoDB data to JavaScript
- jsonwebtoken - For authentication
- bcryptjs - For data encryption
- Nodemailer - Send e-mails from Node.js
- dotenv - Zero Dependency module that loads environment variables
- multer - Node.js middleware for uploading files
- slugify - For encoding titles into a URL-friendly format
- cors - Provides a Connect/Express middleware
- MongoDB - It provides a free cloud service to store MongoDB collections.
- Github: @SarahNaif
- Linkedin: @sarah-althowebi
- Email: sarah.althowebi@gmail.com