readme-en.md

🇺🇸 English

🇧🇷 Português

🛍️ Apple Store Project

Video   |    Technologies   |    Steps   |    About   |    Pages   |    Components   |    Cloning   |    Contact

📹 Project Video Presentation

apple-store-video.mp4

If the video has any errors, reload the page!
It cannot be deployed just for copyright reasons.

🚀 Technologies Used

Below are the 18 technologies used in the development of the project, and their reasons

NextJS Reason Because it contains several resources that help in development, performance optimizations and the like, such as the SSR used to fetch data in the application, thus also improving SEO, in addition to easily enabling the creation of routes through the Routes API.	Typescript Reason Because it works very well with Next and is a Javascript superset, bringing features and good practices that give a lot of security during development and confidence in the result, such as its static typing and error checking.	Redux Toolkit Reason To centralize and standardize the states and purchase logic of the application, in addition to being extremely flexible and debuggable.	Tailwind Reason By streamlining and standardizing the development of application styles, bringing several resources to better deal with CSS.	ReactJS Reason It's the base framework of the project, Next exists from it.
Stripe Reason As it is a reputable payment processing platform, it is used to simulate the payment of purchases.	NextAuth Reason For user authentication by your Google account.	Sanity.io Reason Because it is a simple database to deal with and highly customizable.	HeadlessUI Reason Because it has extremely useful and well-structured components, in addition to integrating very well with Tailwind.	React Responsive Reason For helping to treat the application's responsiveness in a different, but necessary, way than Tailwind.
React Hot Toast Reason Because it has highly customizable, well-structured, and simple-to-use notifications.	Overlayscroll React Reason To perform scroll styling and viewport manipulation.	Vercel Analytics Motivo To track website views.	React Icons Reason Because it contains a vast library of icons.	Random String Reason To generate the pages/success tracking number.
Javascript Reason It's the base of Typescript.	CSS3 Reason It's implied in Tailwind.	HTML5 Reason It's implicit in the TSX syntax.

🗓️ Steps

46 of the current 54 steps have already been completed, but new ones could be added!

🗹	Definition of the base structure and installation of dependencies
🗹	Definition of global styles
🗹	Search for good showcase photos
🗹	Development of pages/index base
🗹	Database creation and basic configuration with Sanity
🗹	components/Header development
🗹	Development of components/Button inspired by DevDojo
🗹	Finalizing the structure and style of pages/index
🗹	Database administration panel configuration
🗹	Completion of the database
🗹	Development of pages/api/getCategories and pages/api/getProducts
🗹	Development of utils/fetchCategories and utils/fetchProducts
🗹	components/Product development
🗹	Search for products in the database via SSR
🗹	Redux implementation
🗹	Notifications implementation
🗹	components/Cart development
🗹	pages/checkout structure and style development
🗹	components/CheckoutProduct development
🗹	Grouping of duplicate products in pages/checkout
🗹	Stripe implementation
🗹	utils/get-stripejs and utils/api-helpers development
🗹	pages/api/checkout_sessions development
🗹	pages/success structure and style development
🗹	pages/api/getSession and utils/fetchLineProducts development
🗹	Finalization of pages/success getting the data via SSR
🗹	NextAuth implementation and pages/api/auth/[...nextauth] creation
🗹	Google Cloud project creation
🗹	Implementation of NextAuth in Sanity
🗹	Database deployment
🗹	Project images optimization
🗹	Moving from Hero Icons to React Icons
🗹	pages/index design and responsiveness improvement
🗹	pages/checkout responsiveness improvement
🗹	License creation and project README development
🗹	Project SEO improvement
🗹	react-currency-formatter removal (bugging)
🗹	components/Currency development
🗹	Project deployment in Vercel
🗹	Division of Production and Development branches
🗹	Cross-Browser development
🗹	Scroll Styling
🗹	pages/index responsiveness improvement
🗹	General bug fixes 󠁼󠁼󠁼————————————󠁼 🗹 Fixed pages/index Mobile menu with new scroll 🗹 Fixed components/Cart position with new scroll 🗹 Fixed the Buy button in pages/index with the new scroll 🗹 Fixed Head title 🗹 pages/success scroll fix 🗹 Fixed validateDOMNesting error in pages/success 🗹 SEO fix
🗹	Implementation of Vercel Analytics
🗹	Addition of my social networks
☐	Error handling improvement
☐	Customization of Toasts
☐	Project performance optimization
☐	pages/checkout zip code search development
☐	Storing cart products in Local Storage
☐	Search system development
☐	Pages for each product development
☐	Addition of new products and categories
☐	Apple page cloning
☐	Creation of partner products page consuming an API

📝 About

Watching the video above and/or accessing the project online will help you understand the explanation!

In summary, the application consists of an Apple E-Commerce, simulating a complete purchase flow, where the user can or cannot authenticate himself through his Google account through NextAuth, add and remove products from his cart with the help of Redux, simulate payment for these products through the Stripe test environment, and at the end you will be redirected to a confirmation and thank you page for the purchase. This purchase flow itself involving the products searched from the Sanity database is the main highlight of the application, but there are other very important points that can be seen in the sections below.

I also recommend especially checking out the reasons for using NextJS, Typescript, Redux and Tailwind in the Technologies section, as my main objective with this project was to develop my autonomy with such technologies, since I am a React developer and they are a fundamental part of my ecosystem, being the main ones responsible for agility, reliability, performance and professionalism in general during the development of the application, due to its excellent resources.

But this is clear, without taking away the merit of the other technologies used, they all play a specified fundamental role with them, and contribute to the result of the project as a whole, and I will continue to learn and deepen myself a lot in these technologies and in what is necessary during the development of this application to put all my ideas into practice and fulfill all the tasks listed in the Steps section, which is a section that is also worth checking out to get an overview of the project's evolution.

📄 Pages and Routes

The application has a total of 3 page components, namely:

• pages/index: This is the Home of the application, where the user can monitor the LogIn/LogOut, and add products to the cart. Products are searched in the database using the concept of SSR;
• pages/checkout: This is the purchase review page, where the user can remove products from the cart and continue with the payment, being redirected to the Stripe test environment - a payment page;
• pages/success: After filling in the data and deciding the payment on the Stripe page, the user will be redirected to this page, which is the confirmation and acceptance of the purchase.

The application has a total of 5 route components, namely:

• pages/api/auth/[...nextauth]: This is NextAuth's global settings file;
• pages/api/checkout_sessions: This route is responsible for transforming the received purchase data into the format that Stripe requires, and creating a Stripe session for the user. Usage example: pages/checkout;
• pages/api/getCategories: This route is responsible for returning the product categories from the database. Usage example: utils/fetchCategories;
• pages/api/getProducts: This route is responsible for returning products from the database. Usage example: utils/fetchProducts;
• pages/api/getSession: This route is responsible for returning a session from the received id. Usage example: utils/fetchLineProducts.

📑 Other Components

The application also has 17 more components, namely:

• pages/_app: This component contains global application settings, such as Redux and NextAuth contexts that involve the entire application, global styles, and toast rendering;
• pages/_document: Briefly, this component contains the application's SEO settings.

• components/Button: This component is related to the button reused periodically during the application;
• components/Cart: This component is related to the cart icon that appears when there is an item in the cart and the scroll is below 400;
• components/CheckoutProduct: This component is related to the products shown in pages/checkout;
• components/Currency: This component is responsible for formatting prices currency;
• components/Header: This component is relative to the application header;
• components/Product: This component is related to the products shown in pages/index.

• redux/cartSlice: Using Redux, this component contains the logic used to handle user interaction actions in relation to the shopping system. It exports extremely important functions, such as addToCart and removeFromCart (which are self-explanatory), and values such as selectCartProducts (total of products in the cart), and among others, which are used periodically by the project;
• redux/store: This is the Redux settings file.

• utils/api-helpers: The idea of this component is to streamline and reuse certain processes performed in pages/api, componentizing them in this component. For now, it only exports fetchPostJSON, responsible for speeding up POST requests;
• utils/fetchCategories: This component is responsible for speeding up the search for product categories in the database;
• utils/fetchProducts: This component is responsible for speeding up the search for products in the database;
• utils/fetchLineProducts: This component, working together with pages/api/getSession, is responsible for returning products based on the sent id, and together they perform id verification and can return 404 if it is incorrect;
• utils/get-stripejs: This component is responsible for initializing Stripe, using the Sigleton Pattern to not initialize it more than once.

• sanity: This is the sanity settings file. It also exports urlFor, a function that helps display images of products in the database;
• apple-store-database: This is the project database, created using Sanity.

📖 Cloning the Project

To clone and run this project on your computer you will need Git and Node.js v18.12.1 or higher and previously installed.
After that, in the terminal:

# Clone this repository with:
> git clone https://github.com/Luk4x/apple-store.git

# Enter the repository with:
> cd apple-store

Now being in the root of the project, create the .env.local file, which should contain the following environment variables:

NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_PROJECT_ID=
SANITY_API_TOKEN=

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=

To configure such variables, you will need to create a project in Sanity, Stripe and Google Cloud, plus you'll need to fill in the database as well.
After that:

# Install dependencies with:
> npm install
> cd apple-store-database
> npm install

# Run the project with:
> npm run dev
> cd ..
> npm run dev

# Once this is done, you will be able to access the project at: http://localhost:3000

📞 Contributor Contact

Vitrine.Dev 🪟 Lucas Maciel 🪧 Vitrine.Dev Lucas Maciel ✨ Nome 🛍️ Apple Store 🏷️ Tecnologias nextjs, typescript, redux, stripe, reactjs, tailwind css, sanity.io, next-auth, headlessui, react hot toast, random string, vercel analytics, react responsive, overlayScrollbars react, react icons, javascript, css, html 📷 Img

Back to Top