Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anilsenay/next-e-commerce
An e-commerce website example with NextJS that I made in 1 week as a self challenge. Using Firebase as backend.
https://github.com/anilsenay/next-e-commerce
e-commerce next next-e-commerce nextjs nextjs-example react react-example
Last synced: 3 days ago
JSON representation
An e-commerce website example with NextJS that I made in 1 week as a self challenge. Using Firebase as backend.
- Host: GitHub
- URL: https://github.com/anilsenay/next-e-commerce
- Owner: anilsenay
- License: gpl-3.0
- Created: 2020-10-13T22:11:58.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-30T11:10:46.000Z (5 months ago)
- Last Synced: 2024-12-16T05:04:05.003Z (10 days ago)
- Topics: e-commerce, next, next-e-commerce, nextjs, nextjs-example, react, react-example
- Language: JavaScript
- Homepage: https://next-e-commerce-example.vercel.app/
- Size: 571 KB
- Stars: 240
- Watchers: 4
- Forks: 105
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](#about-the-project)
- [Built With](#built-with)
- [Screenshots](#screenshots)
- [Home (News In)](#news-in)
- [Categories](#categories)
- [Product](#product)
- [Cart](#cart)
- [Account](#account)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Issues / Feature Plans](#issues---future-plans)
- [Contributing](#contributing)
- [Questions & Answers](#q--a)
- [License](#license)
- [Contact](#contact)
## About The Project
I saw a UI design on Dribbble by [Anton Mikhaltsov](https://dribbble.com/shots/9404340-Shop-Clothing-Web-Page). 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
- [React](https://reactjs.org)
- [NextJS](https://nextjs.org/)
- [Firebase](https://firebase.google.com/docs/web/setup)
- [React Hook Form](https://react-hook-form.com/)
- [date-fns](date-fns.org/)
- [Sass](https://sass-lang.com/)
## Screenshots
### News In
- Cards has no links and they are static, they are just placeholders.
### Categories
### Product
### Cart
### Account
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/en/) version 10.13 or later
- [Git](https://git-scm.com/) (I used 2.20.1)
### Installation
1. You need to create a firebase project
2. Clone the repo and change the directory
```sh
git clone https://github.com/anilsenay/next-e-commerce.git
cd next-e-commerce
```
3. Install NPM packages
```sh
npm install
```
4. 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
```
5. Run in development mode
```sh
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](#contributing), 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](https://dribbble.com/shots/9404340-Shop-Clothing-Web-Page). 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](https://twitter.com/anilsenay)
Project Link: [https://github.com/anilsenay/next-e-commerce](https://github.com/anilsenay/next-e-commerce)