/Fashion-Ecommerce-Website

Primary LanguageSvelte

How to get this project to run on first time

Backend Part:

  1. Change directory to the backend folder by running command cd backend.
  2. Create a virtul environment for python by run command python -m venv {{name of venv here}}.
  3. Install all the required packages by running command pip install -r requirements.txt.
  4. Run the command pip install -e . to install the backend folder as a package.
  5. Run the command python app.py to start the backend server.

Frontend Part:

  1. Change directory to the frontend folder by running command cd frontend.
  2. Install all the required packages by running command npm install.
  3. Run the command npm run dev to start the frontend server in development mode or npm run preview for production mode.

Tech Stacks of this project

  • Flask: Backend framework to develop API
  • APIFlask: A simple wrapper of Flask with additional features like Marshmellow, OpenAPI, etc.
  • Sqlalchemy: ORM to interact with database
  • SQLite: A single file database
  • Whoosh: Full text search engine
  • Flask-Migrate: To manage migration of database
  • flask-jwt-extended: To manage JWT token for authentication
  • Sveltekit: Frontend framework to develop website
  • svelte-carousel: A carousel library for svelte / sveletekit
  • sveltekit-flash-message: A flash message library for svelte / sveltekit

Flask shell

  • Flask come with it's own shell to interact with the application. To start the shell, run the command flask shell in the terminal.
  • You can register your own shell command inside the make_shell_context function in the app.py file.

Flask Migrate

  • Whenever you making change about the models.py, you are necessary to run the command flask db migrate -m {{migrate message}} to generate the migration file and then run the command flask db upgrade to apply the migration to the database.
  • Think of flask migrate as a version control for database.
  • A tricky approach to delete all data but keep the model defined is by running the combination of commands flask db downgrade base followed by flask db upgrade.

Color Schemes

  • #d09fdc light purple
  • #FFB6C1 light pink
  • #AEE0FF baby blue

References


SQLALCHEMY

  1. Flask-sqlalchemy Pagination

  2. How to turn Flask SQLAlchemy query results into JSON for an API?

  3. Define relationship in Sqlalchemy

  4. Real Python Data Management With Python, SQLite, and SQLAlchemy

  5. What's New in Sqlalchmemy 2.0


Flask

  1. Handle image between flask to frontend

  2. Handle image between flask to frontend by encode image into base64

  3. Maybe way to store image in flask backend

  4. Walle - A very pro example of flask application

  5. Example application based on the tutorial "Flask Mega Tutorial Series"

  6. How to build an image-sharing app with Flask and ImageKit


Sveltekit / Svelte

  1. Global styles in sveltekit

  2. Horizontal scroll of list of brand

  3. Svelte Carousel

  4. Create accordia in Svelte

  5. Using local storage in Svelte with Svelte store

  6. Sveltekit form action

  7. Form action example in sveltekit with Post HTTP request

  8. Settings cookie from header in svelte by using 'set-cookie-parser' package

  9. Create button group in svelte

  10. Official Sveltekit implementation of real world app

  11. SvelteKit Authentication Using Cookies

  12. Protecting sveltekit routes from unauthenticated users

  13. sveltekit-flash-message


Full Text Search

  1. Full Text Search with Whoosh-Reloaded

  2. Example to integreate whoosh into flask sqlalchemy

  3. Full Text Search using Elasticsearch

Others

  1. Dataset Source: Fashion Product Images Dataset

  2. Youtube Sample Design

  3. Resolving intra-project imports in Python — A simple guide

  4. Resolving intra project imports in python a simple guide visual studio code

  5. Free SVG Icons

  6. A Design Pattern for Python API Client Libraries

  7. Simple Alert/Notification Design