WebShop Project

Implemented requirements

All mandatory requirements and optinal include pay function, remove from cart function. How it looks and performance is up to the grader to decide

1. Backend

   • Django backend
   • JSON API for the shop page
   • HTML landing page served by Django
   • SQLite database

2. Frontend

   • React UI

3. Automatic DB population

   • Landing page has a button to populate the database
   • Populates 6 users
   • Users testuser1, testuser2, testuser3 each own 10 items
   • Password format: pass# where # is hte usernumber
   • Email format: testuser#@shop.aa
   • Existing database data is deleted before repopulation

4. Browse

   • Any user can see all items currently for sale
   • Item cards show title, description, price, and date added

5. Create account

   • Users can create an account with username, password, and email

6. Login

   • Registered users can log in with username and password

7. Add item

   • Authenticated users can add an item to their cart
   • Creation date is automatically stored by the backend

8. Add to cart

   • Authenticated users can add another user's available item to their cart
   • Users cannot add their own items
   • Items added to a cart remain available for other users

9. Remove from cart

   • Users are able to reomve items from their cart and hey appear back in the shop.

10. Pay

• Users can pay for the items in their cart and as a result the item will become unavailabe after purchase for other users.

How to run

Backend

Open a bash terminal:

cd backend
py -m venv .venv
source .venv/Scripts/activate
py -m pip install -r requirements.txt
py manage.py migrate
py manage.py runserver

Django landing page will have the following URL: http://127.0.0.1:8000/

Frontend

Open a powershell terminal:

cd frontend
npm install
npm run dev

React shop will have the following URL: http://127.0.0.1:5173/

Test users after population

testuser1 / pass1
testuser2 / pass2
testuser3 / pass3
testuser4 / pass4
testuser5 / pass5
testuser6 / pass6

Use the Django landing page button to populate the database before testing.

After populating user can open the webshop by clicking the "Open Ben's SkiShop" button.