https://github.com/ralitsaterzieva/trendify
Next.js based e-commerce project
https://github.com/ralitsaterzieva/trendify
chakra-ui e-commerce-project graphql graphql-request hygraph nextjs react-icons stripe-payments
Last synced: 25 days ago
JSON representation
Next.js based e-commerce project
- Host: GitHub
- URL: https://github.com/ralitsaterzieva/trendify
- Owner: RalitsaTerzieva
- Created: 2024-11-16T14:42:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-18T08:26:56.000Z (over 1 year ago)
- Last Synced: 2025-02-01T16:26:49.507Z (over 1 year ago)
- Topics: chakra-ui, e-commerce-project, graphql, graphql-request, hygraph, nextjs, react-icons, stripe-payments
- Language: JavaScript
- Homepage:
- Size: 372 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Trendify - E-Commerce App
Trendify is a modern e-commerce web application built with **Next.js**, **Hygraph CMS** for content management, and **Chakra UI** for building a responsive and accessible user interface. This app follows the learning steps outlined in the book **"Real World Next.js"** by **Michele Riva**.
## Features
- Seamless e-commerce shopping experience
- Dynamic product catalog fetched from **Hygraph CMS**
- User-friendly and responsive UI built with **Chakra UI**
- Integration with **Next.js** for SSR (Server-Side Rendering) and static site generation
## Technologies Used
- **Next.js**: A React framework for building optimized web applications with SSR and static site generation.
- **Hygraph CMS**: A flexible headless CMS to manage products and content.
- **Chakra UI**: A simple, modular, and accessible component library for React.
- **Stripe** (optional for future integrations): For handling payments (if applicable).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.
This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.