Project Description:
Are you interested in learning how to build a full-stack web application using modern technologies and best practices? Do you want to create a dynamic and responsive website that can handle user interactions, data processing, and payment transactions? If yes, then this project is for you!
In this project, you will learn how to implement Redux, a popular state management library for React. Redux helps you manage the complex state of your application and makes it easier to debug and test your code. You will also learn how to use APIs, which are interfaces that allow your web application to communicate with external services and data sources. You will use APIs to fetch data from Vercel’s Postgres database, a scalable and secure cloud database service that supports SQL queries. You will also use APIs to integrate Stripe, a powerful and flexible payment platform that enables you to accept online payments from your customers.
To access the data from Vercel’s Postgres database, you will use Drizzle ORM, an object-relational mapping library that simplifies the interaction between your application and the database. Drizzle ORM allows you to write expressive and elegant code that abstracts away the low-level details of SQL queries. You will also learn how to use Drizzle ORM’s features such as migrations, validations, associations, and transactions.
Finally, you will learn how to implement a feature that allows you to delete an order if the Stripe checkout completes successfully. This feature ensures that your database is consistent and accurate, and that your customers are not charged for orders that they did not complete.
By the end of this project, you will have gained valuable skills and experience in developing a full-stack web application using Redux, APIs, Vercel’s Postgres database, Drizzle ORM, and Stripe. You will also have a functional and attractive website that showcases your project and demonstrates your abilities as a web developer.
For Each step Implementation, a new branch will be created, and it's link will be provided here.
Technologies used or are going to be used are:
- Next.js 13.4 (app router)
- TailwindCSS for styling
- Sanity for content management
- React Redux for state management
- Vercel Postgres for cart data management
- Drizzle ORM for database
- Stripe for payment
- Webhooks (which will handle the calls coming from stripe)