A simple PWA app build with Astro SSR and Strapi CMS.
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Sign in / Sign out / Sign up
- Add / Edit / Delete product
- Add items to the cart
- View the cart and remove items from it
- See some cached images offline
Deployed app can be seen here. It's server side is on HEROKU
('free tier' ), because of that
- Server goes to sleep
- If you are trying to load
/product
page, it might fail the first time (server is waking up), just reload - Authenticated users can upload images and see them, but after server goes to sleep, it erases them
Inside of the project, you'll see the following folders and files:
/
backend/
ββββββ (strapi)
frontend/
ββββββ public/
β βββ assets
β βββ icons
β βββ app.js
β βββ manifest.jso
β βββ service-worker.js
β βββ ...
βββ src/
β βββ components/
β β βββ auth
β β βββ ...
β β βββ header
β β βββ product
β β βββ ...
β βββ layouts/
β β βββ Layout.astro
β βββ pages/
β β βββ index.astro
β β βββ ...
β βββ interfaces/
β βββICartItem.ts
β βββ ...
βββ package.json
First you need to create π (if it doesn't exist) in /frontend
folder:
Replace values with yours, without /
in the end (βοΈβοΈβοΈ)
PUBLIC_SERVER_URL="http://localhost:1337"
PUBLIC_CLIENT_URL="http://localhost:3000"
To run the server:
open terminal
npm install (first time only)
cd backend
npm run development
go to http://localhost:1337/admin --> sign in (try to memorize your email/password βοΈ)
To run the client:
open new terminal
npm install (first time only)
cd frontend
npm run dev
Make sure that urls match ones in .env
, if not replace them.
π