Online Shop Application

An awesome online shop application based on website
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Contributing
4. License
5. Contact
6. Acknowledgments

About The Project

Online Shop Application is a web application that allows their user to buy sneakers online. This website has 2 roles; admin and normal user. As usual, as an admin, they can have control of many things, like manage product, discount, send newsletter, change home page banner, etc. As a normal user, they can look around the sneakers that they want, then buy it. Beside that, they can wishlists item too. Beside the stated features previously, there's still alot of amazing features in this application.

back to top

Built With

Main technology used to built this application are listed below:

• Typescript
• React.js
• Tailwind CSS
• MongoDB
• Node.js
• Heroku
• Xendit API
• RajaOngkir API

back to top

Getting Started

To get started with this project locally, follow below steps:

Prerequisites

Make sure you have package manager (either npm or yarn)

FYI: This project uses npm as package manager, but you're free to use yarn too.

• Install Yarn (Only for user who want to use yarn)

  npm i -g yarn
  

Installation

Below steps will guide you through the local installation process of this application

1. Get your Google Client ID, Google Client Secret, and also GMail Refresh Token from here
2. Get your Xendit API secret key at here
3. Get your RajaOngkir API key at here
4. Get your facebook app ID at here
5. Get your MongoDB cloud connection at here
6. Clone the repo

   git clone https://github.com/stanleyclaudius/online-shop.git
   

7. Install project dependency
   Make sure that your terminal pointing at the root directory of this project (online-shop folder).

   npm i && cd client && npm i
   

8. Complete the .env variable
   Rename .env.example file at server/config directory become .env, then fill the value for every key. Below is the guideline for filling the .env value:
   

   Key	What To Fill	Example Value
   PORT	Your server port	5000
   CLIENT_URL	Your client side URL	http://localhost:3000
   MONGO_URL	Your MongoDB URL	mongodb://user:user1234@main-shardxxxx
   NODE_ENV	Your current environment	development
   ACCESS_TOKEN_SECRET	Random complex string for JWT	DUhxdx183)_--aACN#2%
   REFRESH_TOKEN_SECRET	Random complex string for JWT	17hdjcD7ud(-*&732~
   ACTIVATION_TOKEN_SECRET	Random complex string for JWT	kc81i^&%`-Did##1Z
   GOOGLE_CLIENT_ID	Your google client ID	3392348929324-tarur228dxxx
   GOOGLE_CLIENT_SECRET	Your google client secret	GOCSPX-xxxxxxx
   GMAIL_REFRESH_TOKEN	Your gmail refresh token	1//028dhdjBMudu2829xxx
   MAIL_SENDER_ADDRESS	Email that want to be used to send mail	[email protected]
   RAJAONGKIR_API_KEY	Your RajaOngkir API Key	d8382odkjfd8eri20f
   XENDIT_SECRET_KEY	Your Xendit API secret key	xnd_development_Jd8dsjdofdxxx

9. Complete the constant.ts value
   Rename constant.example.ts file at client/src/utils directory become constant.ts, then fill the value for every constant. Below is the guideline for filling the constant.ts value:
   

   Key	What To Fill	Example Value
   GOOGLE_CLIENT_ID	Your google client ID	3392348929324-tarur228dxxx
   FACEBOOK_APP_ID	Your facebook app ID	18239943847394

10. Lastly, run below command at your terminal to spin off the application

    npm run dev && cd client && npm start
    

back to top

Contributing

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

back to top

License

Distributed under the MIT License. See LICENSE.txt for more information.

back to top

Contact

LinkedIn: Stanley Claudius

Project Link: https://github.com/stanleyclaudius/online-shop

back to top

Acknowledgments

Special thanks to:

• Othneildrew for providing an amazing README template.
• Xendit for provinding payment gateway API to be used in this application.
• RajaOngkir for providing shipping cost information to be used in this application.
• Fariz Ramadhan for proving Indonesia location information to be used in this application.
• React Icons for providing icon to be used in this application.
• Tailwind CSS for providing CSS framework to be used in this application.
• Heroku for providing hosting service for this application.

back to top