Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhishekgurjar-in/todo-mern
This repository contains a **MERN Stack Todo Application** that enables users to perform basic CRUD (Create, Read, Update, Delete) operations on a list of tasks. This project is ideal for beginners looking to understand how a full-stack application works, connecting a frontend (React) with a backend (Node.js and Express) and a MongoDB database.
https://github.com/abhishekgurjar-in/todo-mern
crud-operation express mern-todo-app mern-todo-project mongodb mongoose nodejs reactjs tailwindcss todo-app
Last synced: about 2 months ago
JSON representation
This repository contains a **MERN Stack Todo Application** that enables users to perform basic CRUD (Create, Read, Update, Delete) operations on a list of tasks. This project is ideal for beginners looking to understand how a full-stack application works, connecting a frontend (React) with a backend (Node.js and Express) and a MongoDB database.
- Host: GitHub
- URL: https://github.com/abhishekgurjar-in/todo-mern
- Owner: abhishekgurjar-in
- Created: 2024-11-26T12:01:03.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-26T14:03:37.000Z (about 2 months ago)
- Last Synced: 2024-11-26T15:19:55.532Z (about 2 months ago)
- Topics: crud-operation, express, mern-todo-app, mern-todo-project, mongodb, mongoose, nodejs, reactjs, tailwindcss, todo-app
- Language: JavaScript
- Homepage:
- Size: 62.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN Todo Website
This repository contains a **MERN Stack Todo Application** that enables users to perform basic CRUD (Create, Read, Update, Delete) operations on a list of tasks. This project is ideal for beginners looking to understand how a full-stack application works, connecting a frontend (React) with a backend (Node.js and Express) and a MongoDB database.
---
## Features
- **Add Todo**: Create new tasks.
- **View Todos**: Display a list of all tasks.
- **Edit Todo**: Update existing tasks.
- **Delete Todo**: Remove tasks from the list.
---
## Technologies Used
### Frontend
- **React.js**: User interface development.
- **Axios**: HTTP requests to the backend.
### Backend
- **Node.js**: JavaScript runtime for the backend.
- **Express.js**: Framework for building RESTful APIs.
### Database
- **MongoDB**: Database for storing tasks.
- **Mongoose**: ORM for MongoDB, used for schema and database interaction.
---
## Getting Started
### Prerequisites
Ensure you have the following installed:
- **Node.js** (v14 or higher)
- **MongoDB** (Local instance or cloud, e.g., MongoDB Atlas)
---
### Installation
1. **Clone the repository**:
```bash
git clone https://github.com/abhishekgurjar-in/Todo-Mern.git
cd Todo-Mern
```
2. **Install dependencies**:
- For the backend:
```bash
cd backend
npm install
```
- For the frontend:
```bash
cd ../frontend
npm install
```
3. **Setup environment variables**:
- Create a `.env` file in the `backend` directory and add the following:
```env
MONGO_URI=mongodb://localhost:27017/todo-app
PORT=5000
```
---
### Running the Application
1. **Start MongoDB** (if using a local instance):
```bash
mongod
```
2. **Start the backend server**:
```bash
cd backend
npm start
```
3. **Start the frontend development server**:
```bash
cd ../frontend
npm start
```
4. **Access the application**:
Open [http://localhost:3000](http://localhost:3000) in your browser.
---
## API Endpoints
| Method | Endpoint | Description |
|--------|-----------------|-------------------------|
| GET | `/api/todos` | Retrieve all todos |
| POST | `/api/todos` | Add a new todo |
| PUT | `/api/todos/:id`| Update an existing todo |
| DELETE | `/api/todos/:id`| Delete a todo |
---
## Future Enhancements
- Add user authentication and authorization.
- Implement due dates for tasks.
- Add support for categories or tags.
---
## Author
Developed by [Abhishek Gurjar](https://github.com/abhishekgurjar-in). Contributions and feedback are welcome! 😊