https://github.com/crystallizeapi/dounut-astro
https://github.com/crystallizeapi/dounut-astro
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/crystallizeapi/dounut-astro
- Owner: CrystallizeAPI
- Created: 2024-01-04T14:37:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-02T02:31:18.000Z (about 1 year ago)
- Last Synced: 2025-03-26T10:11:19.326Z (3 months ago)
- Language: TypeScript
- Homepage: https://dounut-astro.vercel.app
- Size: 290 KB
- Stars: 38
- Watchers: 1
- Forks: 29
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AstroJS Boilerplate
---
This repository is what we call a "subtree split": a read-only copy of one directory of the main repository. If you want to report or contribute, you should do it on the main repository: https://github.com/CrystallizeAPI/boilerplates.
---
The product storytelling boilerplate is a minimal eCommerce boilerplate built using AstroJS and Crystallize. You can also check out the [live demo](https://dounot.milliseconds.live/) (deploy it) of this boilerplate.
## What this guide covers:
- Setting up your project
- Instructions for running the project
- Accessing the development site
- Folder structure of the boilerplate
- Editing the components and the theme
- Deploying the project
## Getting Started
To get started, head over to GitHub and clone [the repository](https://github.com/CrystallizeAPI/dounut-astro). Make sure to install all the required packages by running the following command for both the folders:
```bash
npm install
```
## Running the Project
Running the project in development is straightforward. To start the development server, run the following command:
```bash
npm run dev
```
## Accessing the Development Site
Once the development server is running, you will be able to browse to http://localhost:4321/.
## Folder Structure
This section provides you with a better understanding of the folder structure.
**src/components**
Contains all the components used throughout the application
**src/use-cases**
Includes the GraphQL queries and mutations used to communicate with Crystallize.
**src/pages**
Has all the individual pages the website contains.
## Editing the theme
All the theme related information can be edited in the **tailwind.config.js** file. This includes the colors, spacing, typography used throughout the application.
## Editing the components
Components can be edited by heading over to the **components** folder in **src.**
### Frontpage
The frontpage contains a grid and it is fetching all the grid related information (including the layout) from Crystallize. You can directly edit the grid in Crystallize for changes to take effect. Editing the styling such as the background and typography can be done in the **grid-item** component.
### Product
Individual product pages are using two components - one is the **product** component that contains the hero section, and the ‘Add to cart’ button and then the **product-body** component that can be edited to change the layout of the marketing information displayed on the page.
### Cart, Checkout, and Confirmation
The basket, checkout, and the confirmation pages can be edited in their respective files located in the pages folder.
> Please note that this boilerplate does not contain payment integrations such as Stripe. It is using a dummy payment method.
>