This application demonstrates a full-stack setup using React + Redux on the frontend and Express + MongoDB on the backend. It is structured to showcase multiple features while maintaining clarity for learning purposes. The frontend handles the UI and state management using Redux, while the backend manages API routes, database operations, and server-side logic.
This Project is cloned from Repo. The dependencies are installed using the command "npm install" or "npm i". This project can start using the command "npm run dev".
| Layer | Technology |
|---|---|
| Frontend | React, Redux, Redux-Saga |
| Backend | Node.js, Express.js |
| Database | MongoDB (via Mongoose) |
| Dev Tools | Babel, dotenv, Webpack, Concurrently |
The frontend of this application is built using React + Redux. Key components include:
UI Components
- Dashboard.jsx – Main dashboard interface
- Login.jsx and Signup.jsx – Authentication screens
- Navigation.jsx – Navigation bar
- TaskDetails.jsx and TaskList.jsx – Task-related views
Redux / State Management
- mutations.js – Contains Redux action creators
- sagas.js – Handles side effects using Redux-Saga
- sagas.mock.js – Mock data for sagas
The backend of this application is built using Express.js + MongoDB. Key files include:
- server.js – Main entry point for the Express server
- authenticate.js – Handles user authentication logic
- connect-db.js – Establishes connection to MongoDB
- initialize-db.js – Seeds the database with initial data
- communicate-db.js – Contains functions to query and mutate the database
| Setting | Value |
|---|---|
| MongoDB URI | mongodb://localhost:27017/organizer |
| Frontend Port | 8080 |
| Backend Port | 7777 |
| Method | Endpoint | Description |
|---|---|---|
| POST | /task/new |
Adds a new task to the database. |
| POST | /task/update |
Updates an existing task in the database. |
| POST | /comment/new |
Adds a new comment to the task. |
| POST | /user/create |
Creating new users |
| POST | /authenticate |
User authentication |
| GET | /tasks |
Getting all task data |