An e-commerce website example with NextJS that I made in 1 week as a self challenge. Using Firebase as backend.

Overview

Header photo

E-Commerce Website

Demo: https://next-e-commerce-example.vercel.app/

An e-commerce website example built with Next.js that I made in 1 week as a self challenge. There are some issues that I will handle later. Using Firebase as backend.

Contact me ยท Report Bug ยท Request Feature

Table of Contents

About The Project

I saw a UI design on Dribbble by Anton Mikhaltsov. And I wanted to code this design. So I decided to make it a full working website with NextJS but in just 1 week as challenge myself. Some issues are still there but I will check out them later.

  • Filter and Sort buttons are not working yet.
  • Website is not responsive %100 because of time was not enought. I am working on it currently. Now, it is responsive.
  • Firebase functions could be better
  • Home page(News In) cards has no redirects. They are just placeholders.

Built With

Screenshots

News In

Home Image

  • Cards has no links and they are static, they are just placeholders.

Categories

Categories Image

Product

Product Image

Cart

Cart Image

Account

Account Image

Getting Started

Prerequisites

  • Node.js version 10.13 or later
  • Git (I used 2.20.1)

Installation

  1. You need to create a firebase project

  2. Clone the repo and change the directory

git clone https://github.com/anilsenay/next-e-commerce.git
cd next-e-commerce
  1. Install NPM packages
npm install
  1. Create your .env.local file on root folder(next-e-commerce) with this content. Put your firebase keys.
NEXT_PUBLIC_FIREBASE_API_KEY = your-firebase-api-key
NEXT_PUBLIC_FIREBASE_PROJECT_ID = your-firebase-project-id
NEXT_PUBLIC_FIREBASE_APP_ID = your-firebase-app-id
  1. Run in development mode
npm run dev

Issues - Future plans

  • Filter and Sort buttons
  • Optimize firestore query functions
  • On cart page, decrease item button is not working
  • Website will be %100 responsive
  • Replace some HTML tags with semantic tags

Contributing

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

  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

Q & A

  • Question: I created Firebase project but I do not familiar with it. What should I do then? Answer: You can contact me about setting your Firebase project, I would gladly help you.

  • Question: I created Firebase project but I do not have database structure. What should I do then? Answer: Please contact me to get database structure I created.

  • Question: Why did not you share your database structure? Answer: I just want to know if someone is interest in this project :D

  • Question: How can I contribute? Answer: It makes me happy even if you just star this project. For code contributes, you can fork the repo and open a pull request after your changes. Any feedback is also important for me. You can open issue or send me message.

  • Question: Did you design UI? Answer: No, I did not design actually. I found home page design on Dribbble by Anton Mikhaltsov. Except home page, other UI choices is mine. While I made this website in limited time, I did not think on UI/UX a lot. So you can also feedback me about design.

License

Distributed under the GPL License. See LICENSE for more information.

Contact

@anilsenay

Project Link: https://github.com/anilsenay/next-e-commerce

You might also like...
An admin dashboard built with React, Redux, Firebase for the beezer interview coding challenge.

An admin dashboard built with React, Redux, Firebase for the beezer interview coding challenge.

olx-clone using react js , firease as backend ,deployed in firebase , react-router,context,react hooks,olx web app project

OLX clone Start your own website like Olx in minutes with help of Sijeesh Miziha's Olx-Clone React App. Olx-Clone is the potential classified advertis

Full Stack E-Commerce App built with React, using Firebase and Stripe API. ๐Ÿ—ฝ๐Ÿš€
Full Stack E-Commerce App built with React, using Firebase and Stripe API. ๐Ÿ—ฝ๐Ÿš€

Full Stack E-Commerce App built with React, using Firebase and Stripe API. ๐Ÿ—ฝ๐Ÿš€

Amazon Clone Application using React JS, Context API, Firebase and Stripe with full E-Commerce Functionalities like adding to cart feature, user authorization, payment and many more.
Amazon Clone Application using React JS, Context API, Firebase and Stripe with full E-Commerce Functionalities like adding to cart feature, user authorization, payment and many more.

Amazon Clone is the Fully functional Real custom made Web application that covers and entire E-commerece functionality from designing, User Authentication till Payments build using React JS, Firebase and Stripe.

Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Flame is self-hosted startpage for your server. Easily manage your apps and bookmarks with built-in editors.
Flame is self-hosted startpage for your server. Easily manage your apps and bookmarks with built-in editors.

Flame Description Flame is self-hosted startpage for your server. Its design is inspired (heavily) by SUI. Flame is very easy to setup and use. With b

Memos - An open source, self-hosted alternative to flomo

โœ๏ธ Memos Live Demo โ€ข Discussions Memos is an open source, self-hosted alternativ

Pckd is a free-to-use URL Shortener, that can be easily self-hosted
Pckd is a free-to-use URL Shortener, that can be easily self-hosted

The most โšก๏ธ analytics-intensive self-hostable URL shortener, with an amazing UI | AKA free-Bitly/Shlink alternative ๐Ÿš€

CodeClan - Week 9 - Group Project - App created using React, MongoDB and multiple APIs

Education Station Synopsis This app was completed by Cohort E49 for CodeClan's Professional Software Development course. The brief was to create an ed

flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

Sijeesh Miziha 51 Dec 8, 2022
Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

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

Rui Neto 11 Apr 13, 2022
React-realtime-example - Example Demonstrating React with Realtime API Backend

Getting Started with React Realtime Example App This project contains two folder

Haitham Sweilem 1 Jan 6, 2022
A front end base for a backend challenge

A Open source extreme simple task manager written in React Typescript

null 5 May 16, 2022
E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

Jose Furtado 11 Jan 2, 2023
FROG-Backend - Backend para FROG-React

1. Index app.use(routes/auth) 2. Routes/Auth const { callbacks importados } = require(controllers/auth) 3. Controllers/Auth const funcionCrearUsuario

Leandro Arbelo 0 Nov 29, 2022
Primeiro projeto de e-commerce feito na Labenu. A proposta era criar um site de e-Commerce com os recursos React.js.

Primeiro projeto de e-commerce feito na Labenu. A proposta era criar um site de e-Commerce com os recursos React.js.

Joana 9 Oct 30, 2022
A challenge from FrontendMentor to develop a multipage website using ReactJS

Frontend Mentor - Space tourism website solution This is a solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challen

Fury 5 Apr 27, 2022
Simple responsive website for Edvora coding challenge using ReactJS.

Simple responsive website for Edvora coding challenge using ReactJS.

gaser ashraf 8 Feb 15, 2022
Sheliak - an open-source self-managed Single-Sign-On application services that is built using Django, React, and GraphQL

Sheliak - an open-source self-managed Single-Sign-On application services that is built using Django, React, and GraphQL

Lyrid Inc. 2 Mar 21, 2022