Skip to content

NateRiver4612/FullStack-Asos

Repository files navigation


Logo

FullStack Asos

This website got inspired by the original website ASOS , the initial idea was to put every modern technology that we have learned into one place and hope to be the perfect combination to build a website.

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. License
  7. Contact
  8. Acknowledgments

About The Project

Product Name Screen Shot

For the Front-End, NextJS is the best fit in the market for its well-known advantages such as excellent performance in terms of load times, great SEO, load times helped with "lazy loading" and automatic code splitting, pre-rendering which make our application more versatile, etc. For the back-end, our website static data will be fetched from RapidAPI and dynamic data will be stored in MongoDB and queried using Apollo GraphQL. We chose GraphQL over REST APIs because again for practical purposes, putting up the challenge, but must not despite the fact that GraphQL has the power to dominate Rest in some aspects such as Data fetching control, alleviating multiple data sources, etc. We use Firebase Auth for user identification and authentication, simulating items purchased using Stripe, and testing with Unit tests.Finally host our website on Vercel.

Built With

  • Next
  • React
  • MaterialUI
  • TailwindCSS
  • AppoloGraphQl
  • Firebase
  • ReduxToolkit
  • Stripe

(back to top)

Getting Started

Follow these steps below to get and run a copy local version of FullStack Asos

Prerequisites

Go to Asos Rapid API and subscribe their API

Installation

  1. Get RapidAPI Keys and urls at Asos Rapid API
  2. Clone the repo
    git clone https://github.com/NateRiver4612/FullStack-Asos.git
  3. Install NPM packages
    npm install // yarn install 
  4. Enter your API and copy this code to .env
    X_RAPIDAPI_KEY= "ENTER_YOUR_X_RAPIDAPI_KEY"
    X_RAPIDAPI_HOST= "asos2.p.rapidapi.com"
    PRODUCT_LIST= "https://asos2.p.rapidapi.com/products/v2/list"
    PRODUCT_DETAIL= "https://asos2.p.rapidapi.com/products/v3/detail"

Usage

This website is uncompleted due to missing data supply, however there won't be no harm for clicking around. This website is responsive so you can use multiple devices, there's few things you can do right now is just view the list and detail of products, and google // email password sign in,sign up.

Roadmap

  • Home page
  • Products page
  • Product detail page
  • Registe page
  • Cart page
  • CheckOut page
  • Saved items page

Contact

Email:

Mobile:

  • 0909209967

Project Link: https://github.com/NateRiver4612/FullStack-Asos.git

(back to top)