A React.js E-commerce application

QKart is an E-commerce application offering a variety of products for customers to choose from.

During the course of this Micro-Experience, the developer:

• Implemented the core logic for authentication, shopping cart and checkout

• Improved UI by adding responsive design elements for uniform experience across different devices

• Utilized REST APIs to dynamically load and render data served by the backend server

• Deployed website to Netlify

Created a mobile and website responsive E-commerce website in React. Using state and props to deal with the data. Made use of the Material UI library and implemented conditional rendering the UI elements. Implemented Routing for users to get different views. Used REST API to communicate to backend and asynchronous request handling. Utilized Local storage to identify and get the users data when logged in. Lifting the state up to handle cases where sibling elements need to access to the same data. Implemented debouncing to improve the products search feature. Utilized useState and useEffect hooks also with custom hooks like useHistory and enequeSnackbar. Deployment using Netlify and Heroku.

A dynamic news feed website

XBoard is a News Feed website that will feature the latest news for select topics, from Flipboard.

During the course of this Micro-Experience, the developer:

• Built XBoard using HTML, CSS, Bootstrap, JavaScript and JQueryfrom scratch

• Utilized the figma file to understand the design requirements

• Used Accordions and Image Carousel to improve UI

• Fetched news content from flipboard's RSS feed using REST API

• Deployed the website to Netlify

Created Xboard news feed website that features latest news updates on selected topics. Utilized the Figma file to understand the design requirements. Fetched news content from flip boards RSS feed. Used Bootstraps Accordions and Image Carousel for improving UI. Implemented active Carousel image slides. Made an Accordion expanded when page reloads. Deployed website using Netlify.

A dynamic travel website that can be used to browse adventures and make reservations.

QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities.

During the course of this Micro-Experience, the developer:

• Created web pages using HTML and CSS and made them dynamic using JavaScript

• Improved UX with multi-select filters, image carousels

• Implemented conditional rendering of page elements

• Utilized localStorage to persist user preferences at client-side

• Used JQuery to facilitate the reservation form submission

• Deployed the website using Netlify and Heroku

Created QTrip Dynamic travel website that can be used to browse adventures and make reservation. Implemented landing page details by fetching REST API calls to backend server using Javascript . Added the city cards to HTML DOM and made it responsive. Fetched the adventures details by invoking the backend API from page URLs query parameter. Inserted HTML with populated API data using DOM manipulation. Implemented single and multi-select filters and to used local storage to store and retrieve filter data to improve the user experience. Added image carousel on adventure details using Bootstrap and with the help of POST API method users reservation details from form filling data is captured and send it to backend and users can separately review the details By using conditional rendering to show sold out and reservation panel. Deployed backend to Heroku and configures QTrip dynamic frontend to use the Heroku deployed backend. Deployed to Netlify.