Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/barbaraeguche/cartdash
🧺 a minimal grocery shopping application built with react + flask.
https://github.com/barbaraeguche/cartdash
framer-motion grocery mongo-atlas render toast vercel vite
Last synced: 18 days ago
JSON representation
🧺 a minimal grocery shopping application built with react + flask.
- Host: GitHub
- URL: https://github.com/barbaraeguche/cartdash
- Owner: barbaraeguche
- License: mit
- Created: 2024-12-10T19:21:12.000Z (24 days ago)
- Default Branch: main
- Last Pushed: 2024-12-14T19:07:51.000Z (20 days ago)
- Last Synced: 2024-12-14T19:18:36.802Z (20 days ago)
- Topics: framer-motion, grocery, mongo-atlas, render, toast, vercel, vite
- Language: TypeScript
- Homepage: https://cartdash.vercel.app
- Size: 98.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# 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`
```dotenv
# backend configuration
VITE_BACKEND_URL=
```
### `server/env`
```dotenv
# 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](https://www.python.org/downloads/) and [node.js](https://nodejs.org/en) are installed.**
1. **clone the repository:**
```bash
git clone https://github.com/barbaraeguche/cartdash.git
```
2. **navigate to the project directory:**
```bash
cd cartdash
```
3. **run the backend:**
1. **navigate to server directory:**
```bash
cd server
```
2. **install and activate virtual environment:**
```bash
python3 -m venv venv
source ./venv/bin/activate
```
3. **run the flask app:**
```bash
python3 app.py
```
4. open [http://127.0.0.1:5000](http://127.0.0.1:5000) with your browser.
4. **run the frontend:**
1. **navigate to client directory:**
```bash
cd client
```
2. **install dependencies:**
```bash
pnpm install
```
3. **start the development server:**
```bash
pnpm run dev
```
4. open [http://localhost:5173/](http://localhost:5173/) with your browser.
## gallery 📸
showcase