Coder Social home page Coder Social logo

sanity-amazona's Introduction

Sanity Amazona

Lessons

  1. Introduction
    1. What you will learn
    2. What you will build
    3. What Packages you will use
  2. Install Tools
    1. VS Code
    2. Chrome
    3. Git
    4. Node.js
  3. Create Next App
    1. npx create-next-app
    2. add @mui library
  4. Publish to github
    1. create githb account
    2. push to github from vs code
  5. Create Website Layout
    1. Add header
    2. Add main
    3. Add footer
  6. Connect to Sanity.io
    1. install sanity
    2. initialize sanity
    3. create product model
    4. insert sample data to product model
  7. List Products
    1. add localhost:3000 to the CORS origins in sanity
    2. fetch products from sanity
    3. render them in the screen
  8. Create Product Details Screen
    1. add [slug].js to product folder
    2. create component
    3. get slug from the url
    4. fetch product from sanity client
    5. render product image, info
    6. show add to cart button
  9. Create React Context
    1. define Context, Store and reducer
    2. set darkMode flag
    3. use it on layout
  10. Implement Add to cart
    1. define cart in context
    2. dispatch add to cart action
    3. set click event handler for button
  11. Create Cart Screen
    1. get cart items from context
    2. render in the screen
    3. show cart items in the header menu
    4. implement add to cart in home page
  12. Display Cart Badge In Header Menu
    1. add cart link to header
    2. show cart items badge in header
    3. implement add to cart in home page
  13. Create Login and Register Screen
    1. create login form
    2. create register for
  14. Implement User Register API
    1. create user model
    2. create user create route api
    3. use it in the register screen
  15. Implement User Login API
    1. create login api
    2. use login api in login screen
    3. implement logout
  16. Create Shipping Screen
    1. create shipping component
    2. get address fields
    3. implement submit handler
    4. handle redirect
  17. Create Payment Screen
    1. create payment component
    2. get payment method
    3. implement submit handler
  18. Create Place Order Screen
    1. create place order component
    2. preview order
    3. create order model in sanity
    4. create order on place order click handler
  19. Create Order Screen
    1. create order component
    2. display order information
  20. Pay Order By PayPal
    1. generate paypal client id
    2. create api to return client id
    3. install react-paypal-js
    4. use PayPalScriptProvider in index.js
    5. use usePayPalScriptReducer in Order Screen
    6. implement loadPaypalScript function
    7. render paypal button
    8. implement onApprove payment function
    9. create pay order api in backend
  21. Display Order History
    1. create order history component
    2. load orders of current user
    3. render orders in the screen
  22. Update User Profile
    1. create profile screen
    2. create input forms for name, email
    3. update user info
  23. Create Search Screen
    1. create search screen
    2. implement search filters
    3. list products
  24. Publish on Vercel
    1. create vercel account
    2. connect it to gitub
    3. add vercel domain to allow origin in sanity
    4. publish result

sanity-amazona's People

Contributors

basir avatar

Stargazers

Henry Babbage avatar Subarna avatar Abid Hussain avatar Courtney Farzam avatar Mahdi Mzoughi avatar Joshua avatar  avatar  avatar Abdikhaaliq Mohamed Aden avatar ulla avatar BJ avatar Mahbub Morshed avatar  avatar Emi avatar Security Panda avatar Ethan Park avatar MK-STORE.FR avatar  avatar  avatar Walid Wazini avatar  avatar Codescandy avatar  avatar mz0in avatar Nilankoor Biswas avatar Vidas Stirbys avatar PT Philip avatar Juan José Fernández Moreno avatar PaulM avatar Roman Parajuli avatar Prince_kayum avatar  avatar chiri001 avatar  avatar Pierrot avatar NAMEUN CHO avatar  avatar lasse avatar Franco Sebastián Benítez avatar Ronnie Lutalo avatar Geová Ramalho dos Santos avatar QAMAR ZAMAN avatar Guillermo Agnoletti avatar Emmanuel Kafui Anthonio avatar Andreas Straub avatar Gui Lima avatar Goran Petrović avatar Đặng Quang Huy avatar  avatar Anaclet Mwela avatar Fred Suh avatar Umme Sadeka avatar  avatar Gabriel Calderón avatar Evode Teck avatar A.T.M Ruhul Amin avatar

Watchers

Subarna avatar  avatar  avatar Amar avatar

sanity-amazona's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.