Vowls - Frontend

📖 Description

Vowls is the client-side application project. It provides the user interface to generate healthy and nutritionally complete vegan bowls. The frontend consumes the backend API to manage authentication, user profiles, foods, and vowls.

---

🛠 Tech Stack

• Framework: React
• Routing: React Router
• Styling: CSS / Styled components
• API Communication: Axios / Fetch

---

🚀 Features

• Authentication: signup, login, logout
• Profile management: view, edit, delete
• NutriForm completion to personalize nutrition profile
• View personalized foods and meals
• Generate and manage vowls (add, view, delete)

---

📌 User Stories (Frontend)

• 404 Page: As a user I see a 404 page if I visit a non-existent route.
• Signup/Login/Logout: As a user I can register, log in, and log out.
• NutriForm: As a user I can complete my nutritional profile.
• Profile: As a user I can view, edit, and delete my profile.
• Foods & Meals: As a user I can see personalized foods and meals.
• Vowls: As a user I can add, view, and delete vowls.

---

🗺 Routes

Path	Component	Permissions	Behavior
/	LoginPage	anon only	Login form → redirect to vowls after login
/signup	SignupPage	anon only	Signup form → redirect to vowls after signup
/nutriform	NutriForm	user only (not completed)	Complete nutrition profile
/profile	Profile	user only (completed)	View user profile
/foods	Foods	user only (completed)	View food groups
/meals	Meals	user only (completed)	View personalized meals
/vowls	Vowls	user only (completed)	Generate and manage vowls

---

🧩 Components

• Logo
• Login
• Signup
• NutriForm
• Profile
• Foods
• Meals
• Vowls
• Navbar

---

🔌 Services

• Auth Service

  • auth.login(user)
  • auth.signup(user)
  • auth.logout()
  • auth.me()
  • auth.update(newUser)
  • auth.changePassword(newPassword)
  • auth.delete()

• Food Service

  • Food.list()

• Vowls Service

  • vowls.list()
  • vowls.save(vowl)
  • vowls.delete(id)

---

📂 Project Structure (suggested)

client/
├── public/
├── src/
│   ├── components/
│   ├── pages/
│   ├── services/
│   ├── routes/
│   ├── App.js
│   └── index.js
└── package.json

---

🧪 Running Locally

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

---

🔗 Links

• Client Repository
• Server Repository
• Deployed App
• Trello Board
• Slides