What I made 💁‍♂️

Fully functional e-commerce online shop powered by Shopify Storefront API and my own nextjs express server. You have access to many functionalities such as authentification, cart,checkout, adding reviews, asking questions, wishlist, recently viewed products and a fully customizable account with your order history and more. It's mainly built using nextjs and typescript with a scalable, reusable and tested code with a modern UI.

What I used 🔷

• 1. Nextjs/Typescript

  I used Nextjs with typescript in this website to build the user interfaces and my own server API.

• 2. Tailwind/Emotion

  I mainly used tailwind and emotion styled-components to design this e-commerce website.

• 3. React Testing Library

  I used RTL for unit and integration testing.

• 4. Cypress

  I used Cypress to write E2E tests for authentication and payment.

• 5. CircleCI

  Create and maintain fully automated CI/CD pipeline for code deployment using CircleCI.

• 6. MongoDB/Mongoose

  I used MongoDB with mongoose to store and manipulate the data coming from my API such as reviews, wishlist, questions and more.

• 7. Vercel

  I deployed it on Vercel.

• 8. Shopify Storefront API

  This website is mainly powered by the Shopify to handle the main functionalities such as products, cart, checkout, customers and more.

• 9. SWR

  I've used SWR to manage fetching, caching and revalidating data that is coming from the server.

• 10. React Hook Form

  Extensively used RHF for form validation.

Finally 😎

During the process of building this website I've learned how to write cleaner, reusable and scalable code. I've learned how to write unit and integration tests using react testing library and implement end to end tests with cypress.

I dove deeper into react and leveraged all the benefits of nextjs such as using server-side rendering (getSeverSideProps) and static site generation (getStaticProps/getStaticPaths) to generate content on the server which optimizes SEO and performance. I took advantage of nextjs API routes to write my own rest API directly in the framework with express and mongoose.

I also implemented a scalable and reusable hook architecture to handle the data coming from the server either from shopify storefront API or my own rest API. There are two types of server-side data handling hooks:

1. 1. SWRHooks :

   Fetches the data from the server and manipulate it with SWR which gonna stale (cache data with a unique key) and refetch (revalidate.) it.

2. useCustomer: Will handle customer query then call useSWRHook to fetch and cache data

   

3. useSWRHook: Fetch data and cache it with SWR using graphql query as key

   

4. 2. MutationHooks :

   Used to modify server-side data (add products, delete review, etc.) which mutate the SWRHook that was caching the specific data.

5. useCustomerUpdate: Will handle the customer mutation update then call useMutationHook to mutate SWR cached data

   

6. useMutationHook: Will mutate the SWR cached data