Project carried out for the practice of building e-commerce

Overview

slash

An E-commerce site template, implemented with Next.js and TypeScript. Styled with TailwindCSS. This is one of my portfolios, but I would be pleased if these codes helped others, so I published it as an open-source project. feel free to explore it, and if you need help, ask me. I would respond as soon as possible.

To support me, please create Pull request and give star to this repository.
I appreciate your support in advance.

TechnologiesDemoFeaturesPagesGetting startedContributingContact Me

🔧 Technologies

React  TypeScript  Next.js  Redux  Tailwind CSS

Demo

You can visit and explore in the Slash at https://slashop.vercel.app.

🔥 Features

  • Using Redux toolkit as state manager
  • Using Sanity.io as database (incomplete)
  • Fully responsive
  • Multi-language (EN-BR)
  • Multi-theme (Dark/Light)

📃 Pages

  • Main (index)
  • Login/SignUp
  • Products List
  • Product Details
  • Cart
  • Favorites
  • About

(BACK TO TOP 🔝 )

🚀 Getting Started

  1. Sign up in sanity.io and get projectId and token

Warning  To work with sanity, people how live in Iran should run VPN.

  1. Clone the project
git clone https://github.com/Amad3eu/slashshop.git
  1. Install project dependencies
npm install
#or
yarn add
  1. Enter your projectId into lib/client.ts
  2. Add .env file to root project, and enter your token into .env
NEXT_PUBLIC_SANITY_TOKEN= [ENTER YOUR TOKEN]
  1. Go to sanity_onlineshop folder and open new terminal in this path, then
sanity start

open http://localhost:3333 and enter products.

  1. Run the development server in project root path:
npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

💬 Contact Me


(BACK TO TOP 🔝 )

You might also like...

It consists of a recreation of Twitter, to put into practice both Front-end and Back-end knowledge by implementing the MERN Stack together with other technologies to add more value to the project.

Twitter-Clone_Back-end ✨ Demo. 💻 About the project. 📜 Descriptions. It consists of a recreation of Twitter, to put into practice knowledge of both F

Apr 12, 2022

We are students of group named "Special-Team" of GоIT academy. We graduated JavaScript course and for consolidate in practice 📌 knowledges received on this course, we together 🤝 developed graduation project

Проект сайту "Filmoteka" Привіт! 🤗 Ми студенти групи під назвою "Special-Team" академії GоIT 🔥 🚀 Ми закінчили курс JavaScript і для того, щоб закрі

Jan 3, 2023

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

Twitter-Clone_Front-end ✨ Demo. Login Home Profile Message Notifications Deployed in: https://twitter-clone-front-end.vercel.app/ 💻 About the project

Jun 26, 2022

17ᵗʰ Project developed as assessment practice during Driven's Full Stack Develpment course

17ᵗʰ Project developed as assessment practice during Driven's Full Stack Develpment course

Linkr | Back end WIP Full Stack Development Project Browse Nodejs code» - Front end code» Built With Study Playlist In this section I included all You

Aug 23, 2022

17ᵗʰ Project developed as assessment practice during Driven's Full Stack Develpment course

17ᵗʰ Project developed as assessment practice during Driven's Full Stack Develpment course

Linkr | Front end WIP Full Stack Development Project Browse JSX code» - Back end code» Built With Study Playlist In this section I included all Youtub

Jun 20, 2022

In this project, I restructure my previous Awesome books app code. The goal is to practice ES6 syntax and also make the code more organized by using ES6 modules.

Awesome Books In this project, I will restructure my previous Awesome books app code. The goal is to make it more organized by using modules. I will a

Aug 23, 2022

In this project, you will restructure your Awesome books app code. The goal is to make it more organized by using modules and also practice the ES6 syntax.

Awesome-books-with-ES6 In this project, I restructured Awesome books app code. The goal is to make it more organized by using modules and also practic

Sep 16, 2022

In this project, you will restructure your Awesome books app code. The goal is to make it more organized by using modules. You will also practice the ES6 syntax that you have learned.

Awesome books: with ES6 In this project, you will restructure your Awesome books app code. The goal is to make it more organized by using modules. You

Oct 10, 2022
Owner
Luiz Felipe Warmling Amadeu
I like to program, write code, read code and drink coffee
Luiz Felipe Warmling Amadeu
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
It is a solo Project and In this repo I try to build a E-Commerce full-stack website with MERN stack technologies. For Practice purpose.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Alok Kumar 5 Aug 3, 2022
A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up ?? ??‍?? A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

Arhun Saday 34 Dec 12, 2022
A sequence of smart contracts to practice gas optimization. These are used as practice assignments for RareSkills.io and the Udemy Gas Optimization Course

RareSkills Gas Puzzles Puzzles that are ready for you Distribute (hard) Array Sum (easy) Escrow EscrowV2 Mint Presale Require (easy) Staking Contribut

RareSkills 240 Dec 31, 2022
A dashboard for managing orders and inventory for a wordpress e-commerce site which has woo commerce plugin installed

WordPressWooCommerceDashboard - A dashboard for managing orders and inventory for a wordpress e-commerce site which has woo commerce plugin installed. This program provides shipping tracking for Delhivery.

Vikrama Reddy 1 Jan 3, 2022
TS & JS Library for adaptive precision cursor for the web. Releases will come out soon! Meanwhile, check out the demo site:

Haha, cool cursor go brrrr... Table of Content What is this? Installation & Setup Installation Setup Usage Cursor controls Element settings Known issu

LemonOrange 10 Nov 24, 2022
Full-stack-todo-rust-course - we are building this out now in prep for the real course

full-stack-todo-rust-course wip - we are building this out now in prep for the real course Plan Come up with the requirements Create user stories Desi

Brooks Builds 89 Jan 2, 2023
This is a project by members of the KalleTech discord server. We are making a website where you can practice your programming speed.

codetyper This is a project by members of the KalleTech discord server. We are making a website where you can practice your programming speed. Links W

Christoffer Holmesland 15 Nov 18, 2022