E-commerce TesloShop

Introduction

TesloShop is a clone inspired by Tesla's E-commerce page. This project was developed during the Next.js course at the DevTalles programming academy and was later modified to introduce improvements.

Team & Role

-Fullstack developer

Tech Stack

This project was developed to learn the latest features of Next.js in its new versions using app router and server actions.

• 1.

  Next.js --> React Framework

• 2.

  TypeScript --> For logic and type checking

• 3.

  Zustand --> To manage a global state

• 4.

  Tailwind CSS --> For UI styling

• 5.

  Vercel --> To deploy the project

• 6.

  react-Icons --> To use optimized icons

• 7.

  PostgreSQL --> As database

• 8.

  Prisma DB --> As ORM to handle queries and schema for the database

• 9.

  Docker desktop --> To generate a local environment for the use of the database

• 10.

  TablePlus --> To visualize the DB data

• 11.

  Swiper --> To implement the products page carousel

• 12.

  PayPal --> As payment platform

Spotlight

This challenge allowed me to deepen my knowledge about Next.js. In addition, I used Docker Desktop for the first time to generate an image where I could run the database locally and thus have a local environment to develop the app.

It was a great technical challenge as I was able to apply everything I learned about React in a complex project, and learn in the process how to use various technologies from the stack such as: Zustand and Prisma.

Lessons Learned

This E-commerce allowed me to technically test myself, as I modified part of the original functionality to achieve a better user experience.

It also allowed me to integrate a payment gateway into a project for the first time, and I believe it laid a solid foundation for me to continue working on increasingly complex projects using Next.js.