HTML 5
Intermediate
About
Hey there! I'm Prashant Raj, a creative Front-End Developer with a passion for crafting visually stunning and user-friendly websites. Armed with a strong foundation in HTML,CSS,JavaScript and React.Js, I specialize in turning ideas into responsive and engaging digital experiences.
Skills
Languages:
CSS 3
Intermidate
JavaScript
Intermidate
Node.Js
Exploring...
C++ (DSA)
Exploring...
Technologies:
React.Js
Intermediate
Bootstrab
Intermidate
Tailwind CSS
Intermidate
Express.Js
Exploring...
MS Office
Intermidate
Concepts:
Functional Programming
Intermediate
AJAX
Intermidate
JSON
Intermidate
Projects
Food Recipe Finder
Apr 2024
🌟 Introducing the React Recipe Finder App, crafted with love
and efficiency! Seamlessly navigate between key components for
a delightful culinary journey
- App:- Orchestrates the application flow, rendering the header and routing to different pages.
- Header:- Presents the app logo, search bar, and navigation menu for easy access..
- Search:- Empowers users to search for recipes with a user-friendly input field and search button
- Navbar:- Offers intuitive navigation links to the home page and favorites section.
- Home:- Displays a curated list of recipes fetched from the API, allowing users to explore and add favorites.
- Card:- Represents each recipe card, showcasing essential details and providing options to add to favorites or view details.
- Detail:- Showcases detailed information about a selected recipe, including ingredients and an option to add to favorites
- Favourite:- Curates a personalized list of favorite recipes for quick reference and enjoyment.
- Li:- Renders a list of ingredients for each recipe, enhancing user understanding and convenience
Weather App
March 2024
Explore my React Weather App: real-time data, sleek design,
intuitive UI. Powered by React and OpenWeatherMap API for
seamless experience.
- App:- This is the main component rendering the entire application. It sets up the layout and includes a container component.
- Container:- It manages the state of weather data and renders either the header and input part component or the weather card component based on whether weather data is available.
- Header:- ODisplays the title of the application and includes a button to go back to the input form.
- InputPart:- Provides a form for users to input a city name to get weather data. It includes error handling for invalid inputs and provides an option to fetch weather data based on the user's device location.
- Search:- Renders an input field for users to enter a city name and a search button to submit the form.
- Device Location:- Allows users to get weather data based on their device's current location. It includes error handling for location retrieval.
- InfoError:- Renders error messages with different styles based on the type of error.
- Weather Card:- Displays weather information including temperature, weather description, location, feels-like temperature, and humidity. It includes icons for temperature and humidity indicators.
Todo App
March 2024
App Component. Header captures user input. Foreground displays
todos,manages state. Card handles individual todos, offers
editing, deleting, marking.
- App:- This serves as the main container, rendering both the background and foreground components. It sets up the structure for the entire application.
- Header:- Responsible for the form used to input new todo items. It captures user input for both the title and the todo itself, allowing users to add new tasks to the list. It utilizes useState and useEffect hooks to manage state and local storage to persist data.
- Foreground:- This component displays the list of todo items. It manages the state of todos using useState and useEffect hooks, ensuring that changes to the todo list are reflected in the UI and persisted in local storage. It includes functionalities such as editing, deleting, and checking/unchecking todos.
- Card Component:- Represents individual todo items within the list. It provides features like editing todos in place, deleting them, and marking them as complete/incomplete. It incorporates React icons for visual cues and Framer Motion for drag functionality.
Currency Convereter App
March 2024
✨ I've built a dynamic web application using React.js that
allows users to seamlessly convert currencies from different
countries. Here's a quick overview:
- App:- Root component, renders the entire application and imports necessary dependencies.
- GlobalState:- Manages global state using React Context API, fetches currency data from APIs.
- Form:- Renders the main currency conversion form, handles user input and displays exchange rates.
- Input Component:- Renders an input field for entering currency amounts, restricts input to numeric values.
- Select Component:- Renders dropdown menus for selecting currencies, dynamically populates options.
- Options Component:- Renders individual currency options within dropdown menus, handles selection and updates global state.
Shopping Cart App
April 2024
🚀 Excited to share my latest project: a dynamic e-commerce
web application built with React, Redux, and React Router! 🛒
- App:- This is the root component of the application. It sets up routing using react-router-dom and wraps the entire application with necessary providers (ProductState context provider and Provider Redux provider)
- Navbar:- This component represents the navigation bar of the application. It includes links to navigate between different pages such as Home, Favorites, and Cart. It also displays the total number of items in the cart.
- Home:- This component represents the homepage of the application. It displays a loading spinner while fetching products from an API. Once the data is fetched, it renders a list of product cards.
- Cart:- This component displays the cart page. It consists of two sections: CartBox and CartSummaryBox. CartBox displays individual items in the cart, while CartSummaryBox displays a summary of the items in the cart.
- Cards:- This component is responsible for rendering a grid of product cards. It receives product data from the context and maps over them to render individual Card components.
- Card:- This component represents an individual product card. It displays product details such as title, price, description, and rating. Users can add items to the cart and mark items as favorites.
- CartBox:- This component represents the left section of the cart page. It displays individual CartCard components for each item in the cart.
- CartCard:- TThis component represents an individual item in the cart. It displays the product image, title, quantity, price, and provides options to delete the item or update its quantity.
- CartSummaryBox:- This component represents the right section of the cart page. It displays a summary of items in the cart, including the total number of items and the total price.
- Table and TableList:- These components are not directly used in the provided code but seem to represent a table structure for displaying cart items and their details.
- Redux:- The project uses Redux for state management, with a cartSlice containing reducers for adding, deleting, and updating quantities of items in the cart.
- Context Api:- The project also uses React Context (ProductContext) for managing product-related state, such as fetching products, handling favorites, and displaying loading/error states.
- External APIs:- The project fetches product data from an external API (https://dummyjson.com/products) using fetch.
- Styling:- The project uses Tailwind CSS for styling, as evident from the class names used throughout the components