📷 Photo Gallery 🖼️

A fullstack project with React and Flask.

About · Usage · Work log

---

🗣️ About

A minimal website app for displaying a photo gallery. Stack:

• Front-end: Typescript, React, Vite, Vitest, Testing Library.
• Back-end: Python, Flask, Postgres, SQLAlchemy, JWT, Docker, Pytest.

🛠️ Usage

Refer to the README files inside the client and server folders.

📄 Work log

0. Pre-work

• [client] Research most up-to-date ways of creating a React app and choose the best fit
• [server] Decide on the backend stack

1. Create client app with mocked funcionality

• [client] Create app using Vite + React + TS
• [client] Create sign-in page UI (with mock sign-in validation)
• [client] Create navigation layer + navigate to (empty) photo gallery page from sign-in
• [client] Create photo gallery page UI (with mock data and starring behavior in local state)

2. Create api to serve mocked data + connect client to api

• [server] Create api with Flask
• [server] Create /users/sign-in endpoint to serve mocked token
• [client] Authenticate user on sign-in page
• [server] Create protected /photos endpoint to serve mocked data (imported from JSON)
• [client] Fetch photo data from server (with authorization)
• [server] Create /photos/star endpoint to create and remove photo stars
• [client] Add request to add/remove photo stars

3. Set up database

• [server] Set up database on api
• [server] Create User tabule + update controllers + create admin user on app start
• [server] Create Pthoto table + update controllers
• [server] Create PhotoStar table + update controllers

4. Testing and linting

• [client] Add testing
• [client] Set up linter and formatter
• [server] Add testing
• [server] Set up linter and formatter