ChloeM112/quick-list
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Repository files navigation
========================================
QUICK LIST - To-Do App
By Chloe McKinney
========================================
WHAT THIS APP DOES
------------------
Quick List is a to-do list web application where users can:
- Add new tasks by typing and clicking "Add Task"
- View all saved tasks in a list
- Mark tasks as complete using a checkbox
- Delete tasks using the Delete button
All tasks are saved to a cloud database (MongoDB Atlas) so they
persist even after closing the browser.
TECH STACK
----------
Frontend: React (JavaScript library for building the UI)
Backend: Node.js + Express (server that handles requests)
Database: MongoDB Atlas (cloud database that stores tasks)
HOW TO RUN THE APP
------------------
You need two terminals open at the same time:
TERMINAL 1 - Start the Backend:
cd quick-list/backend
node server.js
(You should see: "Backend server is running on http://localhost:5001")
TERMINAL 2 - Start the Frontend:
cd quick-list/frontend
npm start
(The app will open automatically in your browser)
CRUD OPERATIONS
---------------
C (Create) - User types a task and clicks "Add Task"
→ POST request sent to backend → saved to MongoDB
R (Read) - All tasks load automatically when the page opens
→ GET request sent to backend → data fetched from MongoDB
U (Update) - User clicks the checkbox to mark a task complete
→ PUT request sent to backend → MongoDB record updated
D (Delete) - User clicks the "Delete" button next to a task
→ DELETE request sent to backend → removed from MongoDB
PROJECT STRUCTURE
-----------------
quick-list/
├── backend/
│ ├── server.js (Express server with all 4 API routes)
│ ├── package.json (backend dependencies)
│ └── .env (MongoDB connection string - keep private)
├── frontend/
│ └── src/
│ ├── App.js (main component, manages all data)
│ └── components/
│ ├── TaskInput.js (text box + Add button)
│ ├── TaskList.js (displays all tasks)
│ └── TaskItem.js (single task row with checkbox + delete)
└── README.txt (this file)