Astro SSR Test App

A simple PWA app build with Astro SSR and Strapi CMS.

😀 User Can:

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

❗️ Importan:

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

🚀 Project Structure

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

🧞 Instructions

First you need to create 👇 (if it doesn't exist) in /frontend folder:

`.env`

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.

🎉