cartdash 🧺

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

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.

limitations 🚨

• ui bug: after editing an item, it briefly shifts position before moving back to its original spot.

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 file 📄

client/env

# backend configuration
VITE_BACKEND_URL=

server/env

# flask configuration
FLASK_ENV=production  # not in use, kept for reference.

# mongodb atlas configuration
MONGO_URI=
USERNAME=  # not in use, kept for reference.
PASSWORD=  # not in use, kept for reference.
DATABASE=
COLLECTION=

# frontend configuration
FRONTEND_URL=

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

   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.

gallery 📸

showcase