huri3l / leafy Goto Github PK

Fictional e-commerce platform where developers can get inspired to build their own

JavaScript 0.50% CSS 0.05% TypeScript 99.45%

leafy's Introduction

Leafy - Your E-Commerce Playground 🌿

Leafy isn't just an average e-commerce. It is a vibrant open-source playground where developers can dive into the world of online sales 🚀

🚨 Important Note

Leafy is a fictional e-commerce platform. No real transactions or sales are allowed through Leafy. It's a simulated environment created for educational and exploratory purposes. Enjoy the experience, but don't expect to buy or sell real products here! 🌱

Project Overview

Welcome to the early access stage of Leafy! While some features are still taking shape behind the scenes, the excitement is real! You can check what is already available and what is coming up through the Projects tab.

Configuring Your Leafy Experience

Ready to explore the Leafy jungle? Follow these simple steps to clone the repository and start your local adventure:

Open your terminal and navigate to your desired directory, then run this enchanting command:
```
git clone https://github.com/huri3l/leafy
```
Step into the lush project directory:
```
cd leafy
```
Sprinkle some magic with the command:
```
pnpm install
```
Start the enchantment:
```
pnpm dev
```

Contributing to the Leafy Magic

Currently, contributions are like seeds waiting to grow. Leafy is in early access, and soon, you'll be invited to join the gardening party!

Technologies Woven into Leafy's Fabric:

TypeScript
React
Next.js 13
Tailwind CSS
Prismic CMS

Leafy - Cultivated by Huriel Lopes - https://huriel.com.br/en-us

leafy's People

Contributors

Watchers

leafy's Issues

Use metadata sent by the CMS

Its necessary to use the metadata sent by Prismic in:

Home
Category
Product

Create Category Page

Create the necessary components to the Category Page:

Simple Hero Section
List Products (ProductCard)
Filter and Sort

Bag Page

Create a bag page

Show Price Filter on Filters Drawer

In the filters drawer, there's no way to remove a price filter, since it doesn't show a badge with price filter, only with others.

Organize components

Its necessary to structure better the components folder. Its not organized enough, the pages and components are using several libraries and types that are not centralized and good to use.

For this reason, it was decided to use shadcn/ui as a standard of the components, since its based on Radix UI accessible unstyled components, a library that its already in use in the project.

Also, under the hood, theres the content normalization that converts Prismic data to render Images and Links. But there are Prismic-ready components available that should be used.

Consider consulting https://prismic.io/docs/technical-reference/prismicio-next#prismicnextlink and https://prismic.io/docs/technical-reference/prismicio-next#prismicpreview for technical reference and improve only the rendering of Images and Links.

Create desktop version

Primarily, Leafy will be launched to mobile.

But, it is also necessary to launch it for desktop, and provide access to all devices.

Improve Search Feature

It is necessary to actually make the website's content searchable.

For this reason, a Search Page must be built and the search input in the Header must work to either:

Redirect the user to the search page if he searched for products names, types...
Redirect the user to a Category Page if he search for a term that matches a category name

Integrate CMS

For this project, the Prismic CMS must be used to provide the content that the pages will render.

Its necessary to create the Pages and the Slices with real examples

Checkout

Create checkout flow

Enable Account usage

The user must have an account in order to other features rise.

The first setup of an account must include:

A sign up page
A sign in page
A profile page
A address page

Setup translation

Its necessary to setup translation to have an organized way to define static Portuguese texts in the project, instead of writing it directly in the component.

The goal isn't to launch Leafy with multi language support yet, but have a better way to write static texts.

Create Home Page

Build the following components and use them in Home:

KnowUs
ProductCarousel
Categories
AboutUs

Create Product Page

Create the components necessary to handle the Product Page:

Image Carousel
Price Section
Description

Integrate with an API

Currently, many features are unavailable due to no existence of an API.

For this reason, an API must be created and integrated to the Front-end, to enable the user to have an Account, Buy products etc.

Firebase must be the one to be used, since the features that are planned to be implemented aren't really complex, there's no need to actually validate data for checkout (since its fake) and Firebase attend all the expectations.