cartdash 🧺

a simple and responsive grocery crud application with smooth animations, and a clean ui.

tech stack ✨

• frontend: built with vite, react, tailwind css, and framer motion.
• backend: powered by flask with pymongo for database integration.
• deployment: frontend hosted on vercel; backend deployed on render.

features 👾

• crud functionality: add, edit, and delete grocery items.
• database integration: uses pymongo with mongodb atlas for data storage.
• ui/ux: clean and responsive interface with smooth transitions powered by framer motion.
• notifications: toast notifications for user actions.
• deployment: frontend hosted on vercel; backend on render.

what I learned 💭

• flask & pymongo: first experience using flask with pymongo to handle crud operations.
• http requests: learned to use axios for http requests & resolved challenges with axios delete, which does not accept a data parameter (used query strings instead).
• jsonify responses: realized all api responses must be jsonified for crud operations to work correctly.
• inline editing: implemented in-line editing for grocery items.
• deployment: successfully deploying this project. the hard part was making mongodb atlas functional, but it was worth the effort.

.env files 📄

this project requires .env files for both the server and client, located in their respective folders. rename the .env.example file in each folder to .env, and update it with the necessary values. ensure these files are configured properly and not committed to version control.

running the project 🏁

to get the project up and running on your local machine, follow these steps:

• ensure python and node.js are installed.

1. clone the repository:

git clone https://github.com/barbaraeguche/cartdash.git

2. navigate to the project directory:

cd cartdash

3. run the backend:

   1. navigate to server directory:

   cd server

   2. install and activate virtual environment:

   python3 -m venv venv
   source ./venv/bin/activate
   pip install -r requirements.txt

   3. run the flask app:

   python3 app.py

   4. open http://127.0.0.1:5000 with your browser.

4. run the frontend:

   1. navigate to client directory:

   cd client

   2. install dependencies:

   pnpm install

   3. start the development server:

   pnpm run dev

   4. open http://localhost:5173/ with your browser.

preview 📸

cartdash.mp4