A bakery web application, with ReactJS, Redux, and React-Router-Dom
npx create-react-app my-app
npm install redux react-redux
- Components: Include reusable single components, that can be called throughout the project.
- Data: Dummy JSON data for the website.
- Features: Include multiple components and JSX elements to create compound sections and features.
- Images: Image assets for the website like icons.
- Layout: Page-layout components like navbars and footers.
- Pages: Consist of compound features and sections.
- Redux: Redux store for the web app, contains the cart object.
- Styles: Styles have a variable file that is imported or Sass Implementation.
Figure 2: Landing Page
- The website is designed to provide optimal user experience across a variety of devices and screen sizes.
- Implemented a responsive navbar with a hamburger menu icon to ensure smooth navigation on smaller screens.
- Utilized
variable.scss
to define common media query breakpoints, making it easier to maintain a consistent responsive design. - Utilized CSS grid to create flexible grid layouts that adapt to different screen sizes.
Figure 3: Responsive behavior
- Integrated the popular
react-router-dom
library for client-side routing within the React application. - Implemented nested routes to organize the product pages logically. For example, cakes, breads, and cookies each have their own sub-routes.
- This allows for a clean and intuitive URL structure and seamless navigation between different sections of the website.
Figure 4: Routes and sub-rutes
- Developed a cart feature using Redux to manage the selection and removal of items.
- When adding or deleting items, the cart dynamically updates, reflecting the changes in the total bill of the website.
- The cart state is managed through a cart object in the Redux store, allowing for easy access and modification of the cart data.
- Exposed actions such as
ADD_TO_CART
andREMOVE_FROM_CART
that can be dispatched to interact with the cart.
Figure 5: Add to cart is implemented using a redux store
- Implemented a search feature allowing users to search for bakery items by name or description.
- Utilized a debouncing technique to optimize the search functionality.
- Debouncing helps reduce excessive rerenders and improves performance by delaying the execution of the search function until the user pauses typing.
- This provides a smoother user experience, especially when dealing with fast typing or frequent changes in the search input.
Figure 6: Search with debounce