Build a Cool Stock Watchlist App With React and Tailwind!
Learn React JS with Vite by creating this exiting stock watch list app and style it using Tailwind CSS and React Icons. Use Trading View Widgets to get Stock detail information and performance diagrams.
Display the stocks watch list to the UI by using Higher order array methods like map(), sort stocks by name and sector from A-Z and reverse, display only specific stocks by theare sector using the filter() method, and search for specific stocks by there symbol or name using the find() method.
Also load and save the stock list to Local Storage, and Save it as multiple date depending JSON files to your Data base for later loading as performance comparisons.
Courses
----------------------------------------------------------------------------------------------------------------------
➡️React for Beginners - From HTML CSS & JavaScript to React.js
https://www.udemy.com/course/react-fo...
➡️30+ React Projects, Learn React JS by Building 30+ Web Apps
https://www.udemy.com/course/30-react...
➡️All Course :
https://volerelife.wordpress.com/2024...
----------------------------------------------------------------------------------------------------------------------
Timesteps:
00:00:00 - Start
00:01:16 - Project overview
00:08:42 - How to install and setup Vite
00:13:25 - How to install Tailwind CSS for Vite React
00:17:56 - Create the React App Main Components
00:25:09 - Create Button and Input components in React
00:33:05 - Create Todays Date component.
00:36:33 - Default Stock info component
00:41:54 - Default Stock Chart Component
00:48:07 - Stock List Header Component
00:54:49 - Stock List Table Head Component
01:00:06 - Stock list Table Body component
01:12:04 - Add stock to list
01:25:09 - Edit Stock in list
01:29:50 - Remove Stock from list
01:32:25 - Open selected stock details and chart widget
01:38:12 - Load and Save Stocks list to local storage
01:42:09 - Save and Load from local Database
01:49:14 - Sort stocks by name and Sector
01:55:28 - Filter by stocks by sector
02:00:05 - Search Stocks by Symbol or Name
#reactproject #vitejs #tailwindcssproject