Skip to content

p-racoon/30-days-of-react-e-commerce

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 

Repository files navigation

30-days-of-react-e-commerce

#30 Days of Ecommerce Challenge, aims to upgrade my skills of Frontend-specially react everyday.

Basic E-commerce application

Amazon wasn't built in a day. E-commerce applications look deviously simple in terms of implementaion,However that is not the case, and lots of efforts goes into building one. Since I am limiting myself to just 30 days, in which for first 10 days I wish to implement the whole application all over again everyday.

Thus we need to limit ourselves to certain basic Components namely:-

  1. Cart Page
  2. Product Catalogue
  3. Checkout Page

Day-wise Tasks

0. Basic Setup and get things started, and getting into schedule day.

1. React Study Time

* Follow React Guides (Tic tac toe, To-do etc.)
* Go through React Official Documentation.
* Go through beginner react courses in egghead.io

2. Functional only implementation of e-comm site

* Create basic e-comm application using functional components only.
* Explore the possibility of using Preact

3. OOPS

* class based implementation of the e-comm site.

4. Favourite Flavour Vanilla

* React Implementation without using JSX

5. SE>DEV, shoot for SE you'll land amongst DEV's

* Software Engineering Principles
* Folder Structure Study

6. Thinking ain't enough, Starting ain't Accomplishment

* Folder structure Implementation/Division accordingly

7. Redux vs Context API

* Explore Redux vs Context API

8. Trendy Typecript

* Explore React implementation in TypeScript

9. The Immutable the better

* Integrate immutablity into the application
* Try Immutable.js

10. International Love

* Implement Internationaliztion  

11. Server Side Rendering React

* Next.js
* Study transfor repo
* Try SSR with Express React etc.

11.5: Compilation Time - 1

12. Everyone is Specially Challenged, the question is when?

* Accessibility
* egghead course on Accessibility

13. Power of Atoms

* Atomic design Principles

14. Enough with bootstrap

* Tailwind CSS
* egghead course/youtube channel

15. Flexbox Solved it

* CSS tricks/egghead

16. Everyone digs a good Story, Developers are no different.

* StoryBook Demo/ Intigration
* Story book guide

17. Prev-1-2-3-Next

* Pagination/Infinite Scrolling

18. test.allTheThings()

* Unit Testing
* Integration testing

19. Untill its tested, Software is not a Software.

* TDD

20. State Machines

* DDD

21. State Machine

* State Machine Implementation
* egghead course on State

22. Persistence is the Key

* Persistent State

_22.5: Compilation Time - 2

23. A man is know by the design he keeps

* Adobe XD Design
* Tutorials by Coursetro

24. Monkey see UI, Monkey Develop UI

* UI implmentation/conversion

25. Extra set of Features

* Notifications
* Modals
* Filters
* Sort

26. Librarization of Code - I

27. Librarization of Code - I

28. Payment gateway integration

29. express Implementation

30. (sBuffer)

* SSR without next

Why twitch is important here? Inspiration came from here, I want to learn in public.

About

#30 Days of Ecommerce Challenge, aims to upgrade my skills of Frontend-specially react everyday.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published