/PWA-astro-strapi

A Progressive Web App (PWA) built using Astro.js and Strapi, designed for seamless and efficient web experiences with dynamic content management and robust API integration.

Primary LanguageTypeScript

PWA-Astro-Strapi

This is a Progressive Web Application (PWA) built using Astro.js for the frontend and Strapi for the backend. The project allows users to view products, sign up, sign in, add products to their cart, and remove them from the cart.

VEED.Create.Screen.Recording.2024-09-16.mp4

Project Structure

PWA-astro-strapi/
├── frontend/
│ ├── ... (your frontend files)
├── backend/
│ ├── ... (your backend files)

credential for localhost strapi backend

  1. strapi localhost link:
http://localhost:1337/admin/auth/login

Getting Started

Backend

Strapi.Back.end.mp4
  1. Navigate to the backend directory:

    cd backend
  2. Install dependencies:

    npm install
  3. Run the Strapi server:

    npm run develop

    The backend server will start on http://localhost:1337. You can log in to the Strapi admin panel at http://localhost:1337/admin to create products and manage content.

Frontend

  1. Navigate to the frontend directory:

    cd frontend
  2. Install dependencies:

    npm install
  3. Run the Astro frontend server:

    npm run dev

    The frontend server will start on http://localhost:4321.

Environment Variables

Create a .env file in the frontend directory with the following variables:

PUBLIC_SERVER_URL="http://localhost:1337"
PUBLIC_CLIENT_URL="http://localhost:4321"

Features

  • Strapi Backend: Manage content and products through Strapi’s admin panel.
  • Astro Frontend: View products, create a user account, sign in, and manage your cart.
  • Authentication: Secure sign-up and sign-in with JWT.
  • Cart Management: Add and remove products from your cart.