Share Description
In this course, you will :
- Learn how to use React, PayPal, Figma, GraphQL in combination with a CMS to build an Estore
- Learn styling using Styled Components
- Authenticate using Auth0
- Connect NextJS (React) with CMS using GraphQL
- Implement payments with PayPal
- Send emails using Email.JS
Syllabus :
1. Design with Figma
- About Figma and the project inspiration
- Initial setup
- Design the general layout
- Design the nav links and cart icon
- Colors and Icons
- Design the Contact page
- Design the Cart page
2. CMS section
- GraphCMS got rebranded
- Create GraphCMS account
- General intro
- Create products schema
- The GraphQL playground
- API tokens and permissions
3. The Frontend
- Connect the frontend with the CMS
- Build the first query to fetch products
- Start building the layout
- The navbar
- Build the footer
- Create the top bar
- Start building the menu
- Menu CSS
- Build the list of products
- Menu links to pages
- Build dynamic pages
- Display placeholders for products
- Build dynamic brand pages
- Query the products by brand
- Work on the homepage
- Frontend - custom-hook
- Custom hook to get the product details
- Short bugfix
- Details page
- Fetch product details
- Destructuring product data
- Slug page details
- Slug page images
- Slug page price details
- Add to Cart - buttons
- Details page CSS
- Another bugfix
4. Contact Page
- Base layout
- Create EmailJS account
- Connect to EmailJS
- Tweak the sent message content
- Form styling
- Create the info-card
- Add google map
- Fix map errors
5. Cart Page
- Initial setup
- Basic state management
- Add to cart functionality
- Manage items number in cart
- Styling
- Add cart item details
- Cart math
- Save cart in local storage
- Remove items from cart
- Manage number of items in frontend
- Manage number of items in state
- Clear cart button
- Clean the empty cart
- Show cart info in navbar
- Cart-total card
- Cart-total amount
6. Authentication with Auth0
- Add authentication
- Show the username in the nav
- Login confirm page
- Logout confirm page
7. Payments using PayPal
- Create new PayPal account
- Stripe vs PayPal
- Checkout page
- PayPal checkout button
- Checkout button styling
- Route protection
- Clear the cart after payment
- Stock Manager
8. Final Section
- Store users emails
- Responsiveness
- Hide the menu on small devices
- SEO: basic setup
- Push the code to GitHub
- Deployment
