This React app is a collection of various small React projects to learn new concepts and practice coding in ReactJS.
View project: https://interesting-react-projects.netlify.app/
- Interesting React Projects has a simple home page in three parts inside the main components folder.
- Navbar
- Individual Projects at center: Carousel displayed as default on the Home page
- A projects section at the bottom to navigate different projects implemented using React Router.
- All different projects will sit inside the projects folder in the src
- Each project has all its parts like utility, components, styles, etc inside its folder
-
Projects can be scaled up because of its good folder structure
-
App is divided into various reusable modules with independent components and styles as well as global custom hooks, utility functions and constants data.
-
It uses react router package to handle routing efficiently
-
Nested routing technique is used in Quiz game project
-
Breadcrumbs feature is added for nested routes to indicate the page you are on.
-
Also you can navigate on different pages using breadcrumbs.
- Implementing simple carousel(image slider) functionality in React JS with functions like next image, previous image, auto update image after a few seconds and go to any images
-
Implement an interactive like button functionality
-
Changes color on hover or liked/unlike
-
URL: https://www.greatfrontend.com/api/questions/like-button
-
HTTP Method: 'POST' Content Type:'json'
-
request body- 'action':like or unlike
-
const response = await fetch(URL, { method: 'POST', headers: { 'Content-type': 'application/json' }, body: JSON.stringify({ action: liked ? 'unlike' : 'like' }), });
-
Success:'{message:'some'}' Failure:'{message:';some msg'}'