DEV Community: PRANKUR PANDEY

How to Build a Portfolio Website Using Figma and AI Tools

PRANKUR PANDEY — Tue, 18 Nov 2025 10:41:15 +0000

Ever since my article on How to Become a Full Stack Developer and Get a Job in 2025 went viral, I’ve received countless DMs, emails, and even WhatsApp messages from readers. People have been asking about everything from learning to code and mastering system design to web design and how AI fits into modern development.

I’ve been taking it one topic at a time. My last piece on system design principles received great feedback, and that encouragement has kept me going.

Lately, I’ve developed a deep interest in UI/UX design – not just out of curiosity, but because so many readers have been requesting a detailed guide. They want one that explains how to learn web design, how to apply it to real-world projects, and how AI is reshaping the field.

Looking back, my journey started six years ago as a software tester. From there, I transitioned into full-stack development, then DevOps. I also explored data analysis, and today I manage a full-time freelancing career alongside my farming work.

One thing I’ve learned along the way is that a strong portfolio can take you to places you’d never imagined.

I’ve had a portfolio for years, but now I’m completely rebuilding it from scratch to make it cleaner, smarter, and more reflective of who I’ve become as a developer.

In this tutorial, I’ll walk you through how I created my new portfolio and show you how you can build yours too – with the right structure, design, and a touch of copywriting magic to make it stand out.

What We’ll Cover:

What is a Portfolio Website and Why Do You Need One?
Important Portfolio Website Components
How to Make Your Portfolio Website Stand Out
How to use Figma to Design Your Own Portfolio
Tools for Figma to Code Generation
Copywriting for Your Portfolio
Testing Benchmarks for a Portfolio Website
Hosting Your Portfolio
How to Use Your Portfolio Effectively
Q&A
Final Notes
Conclusion

What is a Portfolio Website and Why Do You Need One?

A portfolio website is your own space on the internet where you can proudly show your best work, projects, and achievements. Think of it as your digital résumé, but far more visual and personal. Instead of just listing your skills or job titles, it lets people actually see what you’ve built, designed, or created, and this tells your story better than any document can.

It helps employers, clients, or collaborators understand your skills, experience, and creativity at a glance. While it’s beneficial for designers, developers, writers, and photographers, anyone who wants to share their work online can create one, from students and freelancers to business professionals.

Here’s why having a portfolio website matters:

A collection of your best work: like a gallery where you keep your most impressive projects, artwork, or achievements all in one place.
Your online identity: It’s your personal brand, showing who you are, what you do, and what makes your work stand out.
A way to showcase your skills: Through images, videos, and live demos, it give people a clear picture of your talent and creativity.
An open door for opportunities: People can visit your site, explore your work, and contact you directly for jobs, collaborations, or freelance work.
A tool for career growth: A well-built portfolio helps you attract clients, get noticed by employers, and open doors to new partnerships.

In simple words, your portfolio website is your professional story told visually – a mix of your work, passion, and personality that helps the world see what you’re capable of.

Important Portfolio Website Components

Now that we know why a portfolio website matters, let’s look at the key components that make it stand out. Each part plays a role in showing who you are, what you can do, and how you can help others.

Since I’m a developer, and the people who have reached out to me are mostly tech enthusiasts, here I’ll give a technical portfolio example. But you can apply the learnings from this guide to build any type of portfolio for any niche/business.

1. Home Page: The First Impression

Your homepage is like the front door to your digital world. It should quickly tell visitors who you are, what you do, and why you’re worth hiring or collaborating with. Keep it clean, simple, and welcoming: just a few strong lines about your skills and what kind of projects you work on.

Tip: Use a short headline like “Hi, I’m Prankur – I build fast, user-friendly web apps.”

2. About Section: Your Story

This is where you make your connection with the audience. Share your journey: how you started, what drives you, and what kind of problems you love solving. Keep it conversational and honest. People love working with real humans, not buzzwords.

Tip: Add a professional but friendly photo (optional) here to make it more personal.

3. Projects / Work Section: Show, Don’t Just Tell

This is the heart of your portfolio. List your best projects – the ones that represent your strongest skills and the kind of work you want to keep doing. Each project should include:

A short description of what it is.
The tools or technologies you used.
The challenge you solved.
A screenshot or live demo link.
GitHub link so that people can see how you code

Tip: 3–6 strong projects are better than 15 average ones. If you’re actively contributing to open source, you should add that to your portfolio, too.

4. Case Studies: Tell the Story Behind the Work

Case studies take your projects one step further. They explain your thinking process and how you understood the client’s problem, what steps you took, and what results you achieved. This helps potential employers or clients see your problem-solving skills, not just your designs or code.

Tip: Keep it short and focus on the “before → after” transformation.

5. Skills & Tools Section

List your key technical and creative skills, like HTML, CSS, JavaScript, React, Figma, or AI.

You can group them as:

Frontend Tools
Backend Tools
Design Tools
AI or Productivity Tools

Tip: Keep the list focused and highlight the tools you actually use, not every tool you’ve ever tried.

6. Testimonials: Social Proof (Optional)

People trust people. Include a few quotes or short testimonials from clients, teammates, or mentors who can vouch for your skills and professionalism. It instantly builds trust and credibility.

If you are just starting, you can add this section later on, as initially you won’t have testimonials. Once you start working, you can politely ask your clients to give their feedback on your work. Just make sure to get their permission to add it to your site.

Tip: Ask for a 2–3 sentence testimonial right after finishing a project.

7. Blog or Articles Section (Optional)

If you write tutorials or share knowledge, add a blog section. It helps you stand out as someone who not only builds but also teaches and communicates ideas clearly. It also boosts SEO and keeps your site fresh.

Tip: Even 2–3 strong, educational articles can make a huge difference.

8. Contact Section: Make It Easy to Reach You

Your contact page should be simple, visible, and welcoming. Include your email, social links (LinkedIn, GitHub, X/Twitter), and maybe a contact form. You can also add a small call to action like:

“Have a project in mind? Let’s connect.”

Tip: Place your contact link in the main menu. Don’t hide it.

9. Résumé / Downloadable CV (Optional)

If you’re job-hunting, include a link to download your latest résumé. You can also add a “quick summary” of your experience, education, and certifications directly on the website.

10. Call to Action (CTA)

Every great portfolio ends with a nudge – a simple next step for your visitor. It could be:

“Let’s build something amazing together.”
“Hire me for your next project.”
“Check out my latest work.”

A clear CTA can help turn a visitor into a lead or follower.

Your portfolio is not just a gallery. It’s a storytelling tool. It tells the world what you can do, how you think, and what makes you unique. Make sure every section serves a purpose, looks clean, and reflects your real personality.

How to Make Your Portfolio Website Stand Out

1. Showcase Your Best Work

Only include your strongest and most relevant projects. Quality matters more than quantity. A few great examples of your work will create a much better impression than a long list of average ones.

2. Use High-Quality Images and Videos

Make sure your work looks clear and professional. Good visuals instantly catch attention and show that you care about presentation. Use clean screenshots, mockups, or short demo videos.

3. Write Clearly and Keep It Short

Explain your work and skills in simple, easy-to-read language. Avoid long paragraphs — most visitors just skim. A few lines that get straight to the point are enough.

4. Tell Your Story

Use your “About Me” section to share your journey — how you started, what you love building, and what kind of work you enjoy most. People connect more with stories than with just titles or resumes.

5. Keep Navigation Simple

Make sure visitors can easily find your projects, contact info, and other key details. A clean menu and clear layout help people focus on your work instead of figuring out where to click.

6. Keep It Updated

Whenever you finish a new project or learn a new skill, add it to your portfolio. An up-to-date portfolio shows that you’re active, learning, and growing in your field.

7. Optimise for SEO

Use the right keywords — the ones people might type when searching for your kind of work (like “frontend developer” or “Figma to code expert”). This helps your site appear in search results. Many AI-powered website builders can assist with basic SEO setup.

How to Use Figma to Design Your Own Portfolio

Designing your own portfolio might sound intimidating at first, but tools like Figma make the process surprisingly intuitive – even if you’re not a professional designer. With Figma, you can visually plan every section of your portfolio before turning it into a live website.

I’ve been learning web design and using Figma for a long time for my client projects. But here, I didn’t build the entire portfolio from scratch. I used Figma’s design inspiration library to get some ideas, and I built the portfolio based on that.

Let’s walk through how you can do that, step by step, using the layout shown below as an example:

1. Start With a Wireframe

Before adding colours or fancy visuals, begin with a simple wireframe. It’s basically a rough sketch of your portfolio layout.

In Figma, you can create frames for each section you want on your site:

Hero section (your name, title, and call-to-action buttons)
“What I Do Best” or skills
Tech stack
Featured projects
Blog or article previews
Services and pricing
Contact form

This helps you get the structure right before focusing on design. Don’t worry about fonts or images yet – just boxes and text placeholders are enough.

Here’s a sample wireframe I created to visualise how everything should look before moving into Figma. It’s always a good idea to sketch or plan your design on paper first, as it helps you get a clear picture of the layout and refine details like colours, fonts, and spacing early on.

Once the wireframe is ready, you can start adding your preferred colours, typography, and images to bring the design to life. If you want to go a step further and understand how to choose the right colour palettes and fonts, it’s worth exploring design psychology — it plays a huge role in how people perceive your work.

2. Add Visual Hierarchy and Colour

Once your structure feels solid, start adding typography and colour to create a visual hierarchy. This helps the viewer’s eyes know where to focus first.

For example, in the sample design above, the hero section (at the top) instantly grabs attention with bold typography (“I build things for the web”) and a subtle background/hero image.

Use Figma’s colour styles to define a consistent palette. Try using about 3 to 4 shades that complement each other. Keep it minimal and professional. For text, you can choose neutral fonts like Poppins, Inter, or Roboto, which look great on both dark and light themes.

3. Create Components for Reuse

Figma allows you to turn recurring UI elements like buttons, cards, and tags into components. In the portfolio example here, notice how every project card, article preview, and pricing box follows the same layout. By creating a single card component and reusing it, you can easily maintain consistency and update everything in one go later.

In this design, I will be using a blog featuring component multiple times, so instead of designing it again and again, I have made it once, and I am now using it multiple times.

4. Add Your Content and Images

Now that your base design is ready, it’s time to make it personal. You can go ahead and replace placeholders with:

Your best project screenshots (use mockups if needed),
Professional headshot or relevant visuals,
Real content, like your bio, skills, and service details.

Make sure you keep the spacing clean. It ensures all sections stay neatly aligned, even when you adjust or add new elements later.

In this hero section, I have used my name and colour and font of my choice on the left, and you can see the Styles showing all the colours I have used across the project.

5. Create Interactive Prototypes

Before exporting your design, use Figma’s Prototype Mode to link different pages together – for example, make “Projects” in the top navigation scroll smoothly to your project section. This gives you a working demo to test how users will experience your portfolio before you even write a single line of code.

You can also share this prototype with friends or mentors for quick feedback.

6. Export or Hand Off for Development

After testing your design in Prototype Mode when you’re satisfied, the final step is the handoff. Use the Export panel to download all required assets (icons, logos, images) in their correct formats. Then share the Figma file and go to Dev Mode, where you can inspect typography, spacing, sizes, and colour values. These exported assets and inspected specs are what developers use to create the live HTML/CSS code.

Note: The Dev Mode in Figma allows you to inspect CSS and export your stuff easily. Since I don’t have a paid Figma plan, I can’t show inspecting and exporting.

Designing your portfolio in Figma gives you full freedom over layout, colour choices, and how you present your personality. Keep it simple, prioritise usability, and design with clarity. Once the layout is complete and tested, converting it into a functional site becomes straightforward.

You can also use auto layout just by right-clicking on the design section components.

Auto Layout allows designers to define rules for spacing, direction, padding, and alignment of elements. This ensures layouts like buttons, lists, and cards instantly adapt (scale/shrink) to content changes or different screen sizes without manual adjustments.

Once you’ve built and tested your Figma layout, converting it into code becomes the easy part.

Tools for Figma to Code Generation

By the time you’re done with the wireframe and colours, and your portfolio is live on Figma, it’s time to convert that Figma design into code. There are two ways to do so:

Manual Method
AI Method

How to Manually Convert Figma Designs to Code

When you design a website or app in Figma, the next big step is turning that design into working code. Traditionally, developers have done this manually: inspecting each element, writing HTML, CSS, and then refining the layout in frameworks like React or Tailwind CSS.

It’s important to understand how this process is normally done by hand. This is the foundation that every frontend developer relies on — and it’s also what helps you evaluate and improve AI-generated code later.

When you design a website or app in Figma, the next step is to translate that visual layout into real HTML, CSS, and JavaScript. Developers usually start by examining each element in the design – its size, spacing, typography, colour, and layout rules – and manually rebuilding it in code.

Exporting Visual Assets

Using Figma’s Export panel, you download only what needs to be recreated visually in code:

icons
illustrations
logos
images or thumbnails

Most structural elements (buttons, cards, sections, containers) are not exported – you’ll need to build them using HTML and CSS.

Rebuilding the Layout with HTML and CSS

You’ll recreate the page section by section:

Setting up the HTML structure
Adding Flexbox or CSS Grid for layouts
Applying typography exactly as specified in Figma
Matching spacing using padding, margins, and gaps
Defining colours using the hex codes from the Figma Inspector

If you’re using Tailwind CSS, this becomes a matter of applying the right utility classes, but the logic remains the same: everything is recreated manually.

Once you have your Figma layout ready, the real work happens inside your code editor (which for me is VS Code). Here’s how developers traditionally rebuild the UI one section at a time.

Set Up Your Project Structure

In VS Code, create your project structure. It’ll look something like this:

project/
 ├─ index.html
 ├─ styles.css
 ├─ /assets
 │    ├─ logo.svg
 │    ├─ hero-image.png
 │    └─ icons/

If you’re using React, this becomes the structure:

src/
 ├─ App.jsx
 ├─ components/
 ├─ index.css
 ├─ assets/

This structure mirrors what you saw in Figma: each major design section becomes a container or component.

Write the HTML Structure Section-by-Section

Now, you’ll look at the Figma frame and convert it to raw markup.

As an example, let’s look at the Hero Section.

Figma frame shows:

a headline
subtext
a button
an illustration

So your HTML becomes this:

<section class="hero">
  <div class="hero-content">
    <h1>Modern UI for Everyone</h1>
    <p>Beautiful designs built for speed and accessibility.</p>
    <button class="cta-btn">Get Started</button>
  </div>

  <img src="assets/hero-image.png" alt="Hero illustration" class="hero-img" />
</section>

You're essentially mapping each Figma layer onto an HTML element.

Build Layouts Using Flexbox or Grid

In Figma, layouts are visual. In HTML/CSS, you must translate the layout rules.

If Figma shows two columns (text + image), you’ll use Flexbox:

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

If Figma has a 3-card layout, you’ll use Grid:

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

You literally reconstruct the layout from scratch by interpreting the Figma frame’s structure.

Apply Typography Exactly as in Figma

Next, you’ll go to Figma, select a text layer, and check the Inspector:

Font family: Inter
Font size: 36px
Line height: 44px
Font weight: 700
Letter spacing: -1%

Then recreate it like this:

.hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

This is why developers need to know their fundamentals: AI tools often miss these fine details.

Recreate Spacing With Padding, Margins, Gaps

In Figma, spacing is visual. But in code, you must calculate and apply it.

Example Figma spacing:

Padding inside a button: 16px vertical / 32px horizontal
Margin below a heading: 24px
Gap between elements: 32px

So you write this code:

.cta-btn {
  padding: 16px 32px;
}

.hero h1 {
  margin-bottom: 24px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

Everything must match the design. And in this case, spacing is what makes UI look polished.

Apply Colours Using Figma Hex Codes

In Figma Inspector:

Primary Blue → #4A78FF
Background → #F8FAFC
Text → #1A1A1A

In your CSS:

body {
  background-color: #F8FAFC;
  color: #1A1A1A;
}

.cta-btn {
  background-color: #4A78FF;
  color: white;
}

You’ll need to manually copy each hex code into CSS, as this is where accuracy matters.

(If Using Tailwind) Apply Utility Classes Instead of Writing CSS

Switching back and forth between your Figma design and a separate CSS file can slow down your whole workflow. Tailwind CSS solves this by letting you write styles right inside your HTML using small, reusable utility classes.

In this guide, you’ll learn how to take the exact pixel values you see in the Figma Inspector and turn them into Tailwind utilities—without confusion.

Step 1: Understand Tailwind’s Spacing Scale

Tailwind doesn’t use raw pixel values. Instead, it uses a consistent spacing scale, usually based on a 4px grid.

Here’s the simple rule:

Take the pixel value from Figma → divide by 4 → that number becomes your Tailwind utility.

Example:

Figma

Tailwind

Meaning

margin-top: 32px

mt-8

32 ÷ 4 = 8 → so the class is mt-8

Prefixes you need to know

m = margin
p = padding
t, b, l, r = top, bottom, left, right
x = horizontal (left + right)
y = vertical (top + bottom)

Step 2: Converting Complex Padding

If your Figma element uses different padding for X and Y, convert each side separately.

Example:

Figma

Tailwind

Meaning

padding: 16px 32px

py-4 px-8

16 ÷ 4 = 4 → py-4

32 ÷ 4 = 8 → px-8

Step 3: Converting Font Sizes

Tailwind doesn’t use pixel sizes for fonts. Instead, it uses semantic names — almost like T-shirt sizes.

Example:

Figma Font Size

Tailwind Class

Meaning

36px

text-4xl

Tailwind’s 4xl matches 36px in the default scale

This encourages typography consistency, instead of manually choosing random font sizes.

Why This Method Is So Fast

Once you get used to it, the workflow becomes second nature:

Figma value → divide by 4 → apply Tailwind class

No switching files.

No naming CSS classes.

No extra stylesheet bloat.

Just fast, direct, design-to-code translation.

Try It Yourself

Open a Figma component—like a button or a card—and check its spacing, padding, and font size in the Inspector. Then convert everything using the simple rules above.

Before long, you’ll be turning Figma designs into clean Tailwind code in seconds.

You still translate Figma to code manually.

Making It Responsive

You check how the design should behave on different screen sizes:

stacking vs. side-by-side layouts
font scaling
spacing adjustments
collapsing navigation or rearranging grids

This requires writing responsive styles and breakpoints, which AI tools can attempt but rarely perfect.

Why the Manual Way Is Important

Even though it takes more time, this approach teaches fundamentals that AI tools simply can’t replace:

How spacing systems work
How components behave in real browsers
How layout changes across devices
How to optimise for performance and accessibility

These skills allow you to inspect code intelligently and improve it wherever needed, which is almost always necessary, no matter which tool you use.

How to Use AI Tools to Convert Figma Designs to Code (Optional)

To speed up this process, you can now use AI-powered and automated Figma-to-code tools. These tools analyse the Figma file and instantly generate code that you can integrate into your tech stack.

There are multiple tools available in the market, like V0, Builder.io, and Kombai.

What Is Kombai?

An IDE extension that converts selected Figma frames into React/NextJS/React Native code and offers repo-aware features

What Is V0?

A Vercel project focused on fast UI generation, integrated with Next.js workflows

What Is Builder.io?

A visual CMS with Figma integration and a visual editor that can export components for web apps

Building Live

For demonstration purposes, I’ll be using Kombai, a VS Code extension. And since most of us developers spend a lot of time inside VS Code, it’s the perfect place to test it out.

To install it in VS Code, simply open the Extensions Marketplace, search for 'kombai', click 'Install' and open the extension.

Now, at the agent panel, click on the “Let’s get started” button and sign up or log in with your credentials.

Now it’s time to test the agent for real work. To do so, I’ll be using the Figma file attached to build this portfolio.

A few things to keep in mind as you get going:

You’ll need to enable WebGL if Figma is not working on your browser.
You need to know how to copy the Figma file link and how to export the design from Figma.

To copy the Figma design file link, open your Figma design file and simply select your desired design, select copy/paste, and then select copy link to selection. It will copy the complete design file URL.

You can also copy the link of any Figma component and follow the same approach to get the desired outcome.

Open the agent extension in VSCode and select the Figma (icon) agent at the bottom of the agent toolbar. It will open a new pop-up. In it, paste the link you copied to the design file (check the screenshot below). Then you can prompt the agent with what you want it to do with this Figma file.

In my case, I wanted to replicate the same design, so I gave this prompt along with my Figma design link:

“You are an expert UI/UX designer and your task is to build and replicate the entire Figma design in the HTML/CSS/JS code from the attached URL.“

After confirming this, the agent will start working to replicate the same design as you’ve seen in the Figma file.

And here are the results:

Now you have the full picture of both approaches and when to use each one.

Here is the live Project link - FCC FIGMA TO CODE

Here is the GitHub link for the project code - Github Code

Challenges in AI-Generated Code (and Why Developer Oversight Is Essential)

AI tools can speed up the design-to-code process, but the output is rarely production-ready. Most tools struggle with layout precision, accessibility, and responsiveness, especially in real-world designs. You should expect to review and improve various parts of the generated code, such as:

Spacing and alignment issues: AI may misinterpret padding, margins, or grid spacing, so layouts often need manual adjustment.
Responsive breakpoints: Most tools generate layouts for a single screen size. You still need to add tablet/mobile breakpoints and test them across devices.
Semantic HTML: AI tends to use too many <div> elements instead of meaningful tags like <header>, <nav>, <section>, or <button>.
Accessibility gaps: Missing alt text, improper labels, weak colour contrast choices, and a lack of ARIA(HTML Tags) attributes are common issues.
Utility class overload (in Tailwind-based code): AI outputs long, repetitive class lists that need cleanup for maintainability.
Inconsistent component structure: AI may generate components that aren’t reusable or follow naming conventions, so refactoring is often required.
Tokens and theming: Colours, font sizes, and spacing may not map to design tokens unless manually corrected.

Because of these limitations, AI-generated code should be treated as a starting point, not a final product. You’ll still need to validate the logic, refine the structure, and ensure the final result meets real-world quality standards. AI reduces repetitive work, but you, as the developer, need to ensure the code’s correctness, accessibility, and long-term maintainability.

What I Prefer

The manual method gives you complete control and teaches you the fundamentals, which are essential for understanding how layouts, spacing, and components actually translate into real code.

When you write the HTML, CSS, and component structure yourself, you build a deeper understanding of how layouts, spacing, responsiveness, typography, and accessibility truly work under the hood. These fundamentals are what make you a strong frontend developer, and no automated tool can replace that learning.

AI-assisted design-to-code tools can help with speed – especially in the early stages when you just want a quick starting point. They remove some of the repetitive setup work, but the output almost always needs refinement.

In real projects, the most dependable workflow is a combination of both approaches: Use automation only for the boilerplate, then rely on your own frontend knowledge to clean up, reorganise, and fine-tune the interface so it meets real-world standards.

Personally, I still prefer coding my designs manually because it keeps me connected to the craft and helps me build muscle memory. It’s the only way to fully understand how the design translates into a live, responsive interface and how each decision affects performance and user experience.

AI tools don’t replace frontend developers. They simply support them. They handle repetitive tasks so you can focus on the skills that truly matter: clarity of structure, accessibility, responsive behaviour, and crafting an experience that feels polished and intentional.

Copywriting for Your Portfolio

Now that your portfolio is designed and coded, let’s turn our attention back to what it actually says.

Copywriting is the art of using words to convince people to take a specific action, like buying a product, signing up for a service, or visiting a website. It’s a mix of creativity and marketing, where words are used to sell ideas or products smartly and emotionally.

A copywriter writes many types of content, from sales pages, website text, and social media posts to ad scripts and emails. The goal is simple: to make people take action.

So what makes copywriting effective?

Knowing your audience: A good copywriter understands what people need, what problems they face, and what motivates them.
Using persuasive words: Words that spark emotions and make readers want to act.
Clarity and impact: Keeping the message short, clear, and easy to understand.
Consistent brand voice: Writing in a tone that matches the brand’s personality — whether it’s fun, professional, or inspiring.

How to Use Copywriting in Your Portfolio

Your portfolio isn’t just about showing your work – it’s about telling your story in a way that connects with people. That’s where copywriting comes in. Good copy turns your portfolio from a plain showcase into something that feels personal, clear, and convincing.

Here’s how you can use copywriting effectively while building your portfolio:

1. Start With a Strong Headline

The first line people see should instantly tell them who you are and what you do. For example:

“I build modern, responsive web apps that turn ideas into digital reality.”

Your headline is like your elevator pitch: short, powerful, and clear.

2. Tell Your Story

In the About Me section, don’t just list your skills. You should also tell visitors about your journey. Write about how you got started programming, what you’ve learned along the way, and what drives you. Keep it conversational and real, like you’re talking to a friend.

“I started coding six years ago with simple HTML pages. Today, I design full-stack apps and help startups bring their ideas to life.”

3. Write Benefit-Focused Descriptions

When you show your projects, don’t just describe what you built. Explain why it matters.

Instead of: “I built a task manager app.”

Try: “A simple, clutter-free task manager that helps users stay productive without distractions.”

This small change turns your project into a problem-solving story, not just a tech demo.

4. Add a Call-to-Action (CTA)

Every portfolio should guide visitors toward an action, like contacting you, checking your GitHub, or reading your blog.

Here are some examples:

“Want to collaborate? Let’s build something amazing together.”

“Looking for a developer who writes clean and efficient code? Reach out!”

A clear CTA shows confidence and gives people a direction.

5. Keep It Simple and Authentic

Avoid fancy words or buzzwords. Write like a human, not a brochure. Use simple, clear sentences that sound like your real voice.

Good copywriting is not about being clever – it’s about being clear and honest.

6. Maintain a Consistent Tone

Whether your style is formal or friendly, keep it the same across all pages – home, about, projects, and contact. A consistent tone helps build your personal brand and makes your portfolio feel professional.

Copywriting is the invisible thread that ties your portfolio together. It helps people not just see your work, but feel your story.

Testing Benchmarks for a Portfolio Website

Before your portfolio goes live, it’s important to test it so that you know it looks and works as it’s supposed to. A fast, responsive, and accessible site leaves a strong first impression, and benchmarks help you measure whether it’s up to your standards. And a well-tested site loads faster, ranks better, and gives users (and recruiters) a seamless experience.

Below are the key benchmarks you should always check, along with why they matter.

1. Page Load Time

This is the time it takes for your page to fully load after someone visits it. A fast-loading site feels smooth and professional, while a slow one instantly turns people away.

This matters because most visitors leave if a site takes more than 3 seconds to load. Tools like GTmetrix or Pingdom can help you track and improve page load speed by optimising images and reducing unnecessary scripts.

2. Core Web Vitals (LCP, INP, CLS)

Google uses Core Web Vitals to measure real-world user experience.

LCP (Largest Contentful Paint): How quickly your main content becomes visible.
INP (Interaction to Next Paint): How fast your site responds when users interact.
CLS (Cumulative Layout Shift): How stable your layout is while loading.

These metrics directly affect how users perceive your site and also impact SEO ranking. You can test them on PageSpeed I nsights.

3. Mobile Friendliness

Most people will view your portfolio on their phones, so it needs to look and work perfectly on smaller screens.

A mobile-optimised site not only improves user experience but also ranks better on Google’s mobile search results. Use responsive layouts and flexible grids to ensure smooth viewing on all devices.

4. Accessibility Compliance (WCAG)

Accessibility means making your portfolio usable for everyone, including people with disabilities.

This is important because following WCAG standards (like proper colour contrast, keyboard navigation, and alt text for images) shows professionalism and inclusivity. Tools like Lighthouse or WAVE can help you check how your portfolio ranks for key accessibility metrics.

5. SEO Best Practices

SEO isn’t just for businesses. It can also help your personal site appear when someone searches your name or skills.

If you add proper meta tags, structured headings (H1, H2, H3), and descriptive URLs, these features can help recruiters or clients find you more easily. A well-optimised portfolio often performs better on job searches and tech blogs.

6. Responsiveness (Interaction Delay)

Responsiveness measures how quickly your website reacts when users click or scroll. And a laggy interface feels unprofessional and hurts user engagement. By minimising heavy scripts and optimising animations, you ensure smooth, immediate feedback for every action.

7. Security Checks (HTTPS)

Even a simple portfolio needs HTTPS. It builds trust and protects both you and your visitors from data breaches. Browsers like Chrome now flag non-secure sites, so enabling SSL is a must.

8. Resource Size (HTML, CSS, JS, Images)

Heavy resources can slow everything down. Compressing files, minifying CSS/JS, and using next-gen image formats (like WebP) can dramatically improve speed and performance.

9. Browser and Device Compatibility

Not everyone uses Chrome on a laptop. So make sure you test your portfolio across major browsers (Chrome, Firefox, Safari, Edge) and devices (desktop, tablet, mobile). Simulated testing tools like DebugBear or Basemark Web help catch layout issues early.

10. Real User Monitoring (RUM)

Instead of just testing in a lab, RUM captures how real visitors experience your site. This helps you understand performance in real-world scenarios – on different devices, networks, and locations – and adjust your design based on real data.

Hosting Your Portfolio

Now it’s time to push your changes to GitHub and deploy them on a hosting provider of your choice. Hosting services play a crucial role in showcasing your work. Depending on the type of projects you build, here are some of the best free hosting options that I have used so far for my personal and professional projects.

Vercel – Best for Next.js/React projects, offering seamless deployment inside the Vercel ecosystem.
GitHub Pages – Great for hosting static websites and personal portfolios.
Netlify – Ideal for frontend-heavy projects with easy deployment and CI/CD integration.

Your portfolio is ready, and you can share it anywhere with just a link.

How to Use Your Portfolio Effectively

Now that your portfolio is ready, it’s time to use it the right way. Whether you’re applying for a job, pitching to a freelance client, or simply networking with like-minded people, your portfolio is your strongest asset.

Think of it as your digital introduction. It not only shows what you’ve built but also how you think and work. The key is to use it smartly in the right context.

Let’s say you come across a job post or want to reach out directly to a recruiter or a company founder. Instead of just sending a plain résumé, you can make your message stand out by attaching your portfolio link. Here’s an example of how you can do it:

Example email/direct message:

Hi [Hiring Manager/CEO Name],

I’m Prankur, a Full Stack Developer from India with over 6 years of experience building mobile and web applications.

I came across the opening for [Job Title/Role] at your company and believe my skills align perfectly with what you’re looking for.

You can explore my work here: [Portfolio URL]

I’m available to start immediately and excited about the opportunity to contribute to your team and codebase.

Best regards,

Prankur Pandey

This small but professional touch – including your portfolio link in every email, proposal, or LinkedIn message – increases your chances of being noticed. A well-presented portfolio speaks louder than a résumé, and it helps recruiters or clients quickly understand your skills, design sense, and coding depth.

So, don’t just build your portfolio. Use it actively. Share it on job boards, LinkedIn posts, your GitHub bio, or even in casual conversations with potential collaborators. Every share is a new opportunity waiting to unfold.

Q&A

1. Is building a portfolio really important?

Absolutely. Instead of sending out a dozen links to your GitHub, Behance, and LinkedIn, it’s much more effective to combine all your work into one clean, accessible portfolio site. It makes you look organised, professional, and easy to evaluate.

2. Is it worth buying a domain name?

Yes, it is, if you’re serious about your career. Having your own domain (like yourname.dev or yourname.com) gives a personal and professional touch,

But if you’re still learning or just experimenting, it’s fine to start with a free domain. Once you have solid projects to show, investing in your own domain is totally worth it.

3. Can I use AI or no-code tools to build my portfolio?

You can, but if you’re a developer, you should try coding it yourself first. It’s a great way to showcase your creativity and technical control over design and logic. Here’s a simple and straightforward guide to help you get started with that.

Once your design is ready, you can always use AI or no-code tools to speed up the process or automate parts of it. Think of AI as a helper, not a replacement.

4. How can I get AI tools for testing?

It’s easy: visit the official websites of the tools you’re interested in and sign up. Most AI tools offer free trials or limited credits that you can use to explore and test their features based on your workflow and needs.

5. I am just starting. What should I use: AI tools or the Manual Method?

I strongly recommend using the Manual Method as it will help you to understand your craft well, and you will also build muscle memory about a technology and how it works.

6. Which Platform should I use for hosting?

Most of the hosting providers offer a free plan, so you can start with that. Then, when you feel the need to expand your portfolio, switch to a paid plan.

Final Notes

Building a strong portfolio requires time, effort, and attention to detail. But it’s one of the smartest investments you can make in your tech career.

Tools and templates can help speed up the process, but your creativity, skills, and storytelling are what truly make a portfolio stand out. A well-crafted portfolio not only shows what you can build, it reveals how you think and why your work matters.

While you can use design tools, frameworks, or even AI assistance to save time, make sure you understand the basics of design, structure, and usability. The goal isn’t to create something flashy; it’s to produce something clear, professional, and authentic.

Your portfolio is your digital identity, so treat it like your personal brand. Keep refining it as your skills grow and let it evolve alongside your career.

Conclusion

A portfolio isn’t just a website. It’s your story told through your work. It helps employers, clients, and collaborators understand what you do best and why you stand out.

In this article, I’ve shared everything that helped me build and refine my own portfolio, from understanding design structure and copywriting to testing and optimisation benchmarks. My goal is to help you create a portfolio that not only looks great but also opens real opportunities for you.

In my next tutorial, I’ll explore something new for sure.

Design + Creativity+Development + Execution = The Ultimate Developer Stack 🔥

Keep learning, keep building, and most importantly — keep sharing your work.

If you found this article useful, feel free to let me know. I’m always open to learning, collaboration, and new opportunities.

Now it's your turn: what are you building next? Let me know by sending me a DM!

Follow me on 𝕏: Prankur's 𝕏
Connect with me on LinkedIn: Prankur's LinkedIn
Follow me on GitHub: Prankur’s GitHub
View my Portfolio: Prankur's Portfolio

AI in Frontend Development: Lessons from Testing Modern Figma-to-Code Tools like V0, Builder.io, and Kombai

PRANKUR PANDEY — Thu, 06 Nov 2025 04:55:57 +0000

Over the past few weeks, I’ve been exploring a range of AI tools, testing them in real projects and integrating them into my daily workflow. My goal was simple: to see how far AI can truly go in helping developers build real, production-ready products.

During this time, I used several of these tools to ship client projects, including a full web MVP built in just 30 days and an Android mobile app. Since I already had the UI designs, my main focus was turning them into fast, pixel-perfect frontends and integrating a solid backend behind them. Throughout that process, I tried dozens of AI tools for both frontend and backend tasks.

In a space where every major company is experimenting with AI, I wanted to dig deeper and test tools that don’t just generate code but also understand design.

In this article, I’ll take you behind the scenes of my experience with front-end AI tools. I’ll talk about how they performed, what impressed me, and why prompting is a crucial skill every developer should master when using AI tools.

What We Will Cover

What is an AI Agent?
What is Front-End Development (and Why It’s So Challenging)
Front-End Tools, Technologies & Web Design Essentials
My experience with AI Tools
Why and How I tested the AI Agent
The 12 Benchmarks I Used to Compare AI Design-to-Code Tools
Testing in Real Time
Benchmark 1: Setting Up the Tools
Benchmark 2: Testing Figma to Code
Feature Table
A Few Areas to Improve
How to give proper context and prompts to AI Agents/tools
Q&A
Final Notes
Conclusion

What is an AI Agent?

AI agents are computer programs that can do certain jobs on their own. They collect information, think about it, and then decide what to do — a bit like how people make decisions.

For example, a customer help agent can look for answers to a person’s question or ask a real person to help if needed.

Here’s how AI agents work:

Have a goal: Each agent is given something to do, like “answer people’s questions” or “help design something.”
Make choices: The agent decides on its own how to do that job in the best way.
Use information: It looks around – like reading messages, files, or the internet – to find helpful data.
Take action: It performs an action based on what it has learned, such as replying to someone, finishing a task, or using another app.
Work by themselves: They can do many things without people telling them each step, but for very hard problems, they can ask a person for help.

Agents can learn and improve over time, and they get better with practice. Agents can also work together and share information to more effectively finish a big job. And they can use other programs that help them get live information, like the weather or news.

Examples of agents:

Customer help: An agent can answer customer questions and find solutions.
Computer work: It can help make apps, write small parts of code, or fix basic computer tasks.
Personal helper: Voice apps like Google Assistant can set reminders or answer your questions.

What is Front-End Development (and Why It’s So Challenging)

Front-end development is the part of web and app creation that users actually see and interact with. It’s where creativity meets logic, and where we turn designs into real, functional experiences. Every button you click, animation you notice, and page you scroll through is built by front-end developers.

A front-end dev’s goal is simple but demanding: make websites beautiful, fast, and easy to use. That means balancing visuals with performance, like choosing the right layouts, colours, and interactions so everything feels smooth and intuitive.

The front end is often called the client side. It’s what users touch and feel. Behind it is the back end, which handles servers, data, and logic. APIs connect the two, ensuring design and functionality work together.

But building that harmony isn’t easy. Front-end development moves fast, and developers face constant challenges:

Keeping up with change: New frameworks and tools appear every month. The key is to learn continuously but choose wisely.
Cross-device consistency: Websites must look great on every screen, from desktop to mobile.
Speed and performance: Users hate waiting, so optimising code, images, and assets keeps experiences fast.
Responsive design: Adapting layouts for different devices is now a must, not a choice.
Accessibility: Good design includes everyone. Small tweaks like clear colours and keyboard navigation matter.
State management: Handling dynamic data efficiently is crucial for smooth user interactions.
Collaboration: Front-end work is teamwork – Git, reviews, and automation keep projects organised.

In short, front-end development is the art of turning design into function. It’s all about crafting interfaces that look great, perform well, and feel effortless. It’s fast, creative, and constantly evolving – and that’s exactly what makes it so exciting.

Front-End Tools, Technologies & Web Design Essentials

Before exploring AI-assisted tools, it’s important to understand the basics of how modern front-end development works.

At its core, every website runs on three pillars: HTML, CSS, and JavaScript. HTML gives structure to the page, CSS handles the design, and JavaScript adds interactivity. Together, they turn static layouts into dynamic experiences.

Once you’ve mastered the basics, frameworks and libraries help you move faster:

React makes it easy to build reusable UI components that scale well.
Next.js adds server-side rendering and better SEO performance for modern web apps.
Tailwind CSS speeds up styling with ready-to-use utility classes, helping developers design responsive layouts in less time.

Good design is just as important as good code. Web design focuses on usability, layout, and visual appeal, ensuring users find what they need effortlessly. A great design balances aesthetics with performance and accessibility, working smoothly across devices and screen sizes.

As a developer, it’s also crucial to think like a designer: paying attention to typography, spacing, and colour harmony. Tools like Figma, Adobe XD, and Sketch make collaboration between designers and developers easier by providing visual clarity before coding begins.

In short, mastering these tools – from HTML and CSS to React, Next.js, and Figma – gives you everything you need to build fast, responsive, and visually engaging web experiences.

My Experience with AI Tools

As AI is changing how software is being built and delivered, I have had the opportunity to explore and work with a lot of tools in the areas of Web Development, Data Analysis, Testing, DevOps and Web Design. And I’m impressed by the quality of work that an AI agent can do based on what I have observed so far.

But what I’ve learned is that you will have plan very smartly if you’re going to use any AI tools for your projects, especially if you’re building full stack software. This process requires that multiple parts talk in parallel – and if you don’t give the AI clear context and a well-crafted and specific prompt, chances are things won’t turn out as you hoped.

I have used many of the top AI tools like Cursor, Windsurf, Replit, V0 by vercel, and Bolt.dev for my personal projects. But for my clients, I still prefer doing things primarily on my own, using AI as a helpful tool when appropriate.

Why and How I Tested the AI Agent

If you’ve ever built a mobile or web app from a Figma design, you already know the pain. Manually copying pixels, measuring paddings, and aligning text styles is like playing Tetris with code.

Recently, I was building a mobile app for a client. I received a complex Figma design with over 20 screens, animations, and responsive layouts. My task was to turn it into real, production-ready code: design, develop, integrate the backend, and finally deploy it to the Play Store.

The work was rewarding, but one thing was painfully clear: Copying and pasting values from Figma to the code editor was exhausting and time-consuming.

That’s when I started looking for a smarter way to do this – and stumbled upon “Design to Code” tools like Kombai, Builder.io, and V0. These are the tools we’ll be examining here, so let’s meet them.

What Is Kombai?

Kombai is an AI-powered design-to-code platform that converts Figma designs into clean, production-grade React, React Native, or Next.js code.

But it’s not just a Figma converter. It positions itself as a front-end intelligence layer. It’s an AI agent that understands your codebase, plans refactors, and applies real-world development logic.

What Is V0?

V0 is an AI-powered design-to-code from the Vercel platform that converts Figma designs into clean, production-grade code, along with an option to build a modern frontend design with prompts. V0 is specialised in making frontends with prompts.

V0 focuses on seamless Next.js integration and instant code generation within the Vercel ecosystem, and it’s ideal for rapid prototyping.

What Is Builder.io?

Builder.io is an AI-powered design-to-code tool, from the Vercel platform, that converts Figma designs into clean, production-grade React or Next.js code, along with an option to build

Builder.io, on the other hand, takes a visual-first approach, combining CMS-like editing with design-to-code export capabilities

Why I Decided to Test and Compare

My first impression was curiosity mixed with skepticism. The benchmarks for all the coding tools were awesome, as each company claims they are perfect for the desired niche. But I wasn’t satisfied with their claims, so I decided to test them on my own and then make a final call.

My goals were simple:

See how well each tool translates design components into usable React code.
Test their understanding of layouts, responsiveness, and reusability.
Evaluate whether these tools can genuinely save time for real developers, not just look fancy in demos.

The end goal was to chase these personal benchmarks which I set for myself:

The 12 Benchmarks I Used to Compare AI Design-to-Code Tools

When testing tools that turn Figma designs into code, it’s easy to get lost in flashy features. So instead of judging by first impressions, I used a set of clear benchmarks: things that actually matter to developers when building real projects.

Here’s a simple explanation of each benchmark I wanted to test and why it’s important:

1. Setup and Integration

This checks how easy it is to get started. Can you connect your Figma design and start generating code quickly? A smooth setup means less time configuring and more time creating.

2. Figma-to-Code Workflow

This is the heart of the process. It measures how accurately and efficiently the tool turns your Figma design into working code. The better this step is, the less time developers spend fixing layout or spacing issues later.

3. Live Preview / Sandbox

A live preview lets you instantly see what the generated code looks like, right inside your browser or IDE.

This saves hours because you don’t have to export, run, or reload files just to check small design changes.

4. Repo and Code Intelligence

This one looks at whether the tool understands existing projects. Can it read your GitHub repo, generate documentation, or give code improvement suggestions? If yes, it’s more than just a design-to-code converter – it’s a real coding assistant.

5. Code Quality and Structure

This measures how clean, readable, and reusable the code is. Good tools generate code that looks like a developer wrote it – not a machine. This makes collaboration and scaling much easier.

6. AI Assistance / Agent Mode

Modern AI tools often act like smart teammates. This benchmark checks if the AI can refactor, explain, or modify code when you ask, not just generate it once and stop. A good AI agent saves time by helping you understand your own code better.

7. Design Fidelity

This is about accuracy. Does the generated code look exactly like your original Figma design? If the fonts, colours, and layouts don’t match, the whole purpose of using such a tool is lost.

8. Responsiveness

Websites and apps must work well on all screen sizes, from mobile phones to big desktop monitors.

This benchmark checks if the tool automatically handles breakpoints and layouts for different devices.

9. Cross-Platform Capability

Some tools only work for the web, while others can generate code for mobile or native apps too. Cross-platform support means you can reuse the same design logic across multiple projects, saving huge amounts of time.

10. Target Audience Fit

Not every tool is made for every kind of user. Some are developer-focused, others are more for designers or content teams. This benchmark helps identify who will benefit the most from each tool.

11. Unique Differentiator

Every tool needs to have something special. It could be repo analysis, AI-assisted coding, or tight integration with deployment platforms like Vercel. This benchmark helps highlight what makes one tool stand out from the crowd.

12. Overall Performance and Value

Finally, this is the big picture: how well the tool performs across all areas combined. Does it really save time? Is it worth using for production work, or only for prototypes? This helps developers decide whether it’s worth adopting long-term.

Testing in Real Time

Now it’s time to test the agents for real work. To do so, I’ll be using an open Figma file, which is complex and free for commercial use (for educational purposes only). Here is the Figma file. I’ll use this file for all the demonstrations below.

A few things to keep in mind as you get going:

You’ll need to enable WebGL if Figma is not working on your browser.
You need to know how to copy the Figma file link and how to export the design from Figma. To copy the Figma design file link, open your Figma design file and simply select your desired design, select copy/paste, and then select copy link to selection. It will copy the complete design file URL.

Now I’ll go through all the benchmarks one by one for each tool.

Benchmark 1: Setting Up the Tools

Kombai

To install the Kombai extension in VS Code, simply open the Extensions Marketplace, search for 'Kombai', and click 'Install'.

Now, click on the “Let’s get started” button and sign up or log in with your credentials.

The agent extension UI looks like this on VSCode:

V0

To get started with V0, visit the official V0 website and sign up or log in with your credentials.

After you’ve successfully login, you will be redirected to the screen below:

Builder.io

Visit the official builder.io website and sign up or log in with your credentials.

After you’ve successfully login, you will be redirected to the screen below:

Select “Convert Figma to Code” and Click on “Continue with Fusion”.

Then select your tech stack. I chose React.

Now you will be redirected to the screen below:

Benchmark 2: Testing Figma to Code

I tested the agent with my Figma setup on both my client projects and personal projects first. I used a simple design (which I gave in the link above).

To continue with our experiment, open the Figma design file and simply select your desired design. Then select copy/paste, and copy link to selection*.* It will copy the complete design file URL. Now we’ll look at how each tool handles the process of converting Figma designs to code.

Kombai

Open the Kombai agent in VSCode and select Figma (icon) agent at the bottom of the agent toolbar. It will open a new pop-up. In it, paste the link you copied to the design file. Then you can prompt the agent with what you want it to do with this Figma file.

In my case, I wanted to replicate the same design so I gave this prompt:

“You are an expert UI/UX designer and your task is to build and replicate the entire Figma design in the HTML/CSS/JS code from the attached URL.“

After confirming this, the agent will start working to replicate the same design as you’ve shared in the Figma file.

And here are the results:

You can also copy the link of any Figma component and follow the same approach to get the desired outcome.

V0

V0 doesn’t allow you to directly import designs using a simple Figma link. Instead, it provides an “Import from Figma” workflow where you first need to export your Figma design then upload it to V0. Once imported, you’ll need to describe your intent through detailed prompts or upload a screenshot of the design for interpretation.

I followed this process myself, but it turned out to be quite time-consuming. The tool didn’t generate the expected layout in a single attempt – I had to refine my prompts multiple times to get a usable output. Each iteration also consumed additional tokens, which can add up quickly during experimentation.

Builder.io

Before starting, make sure everything is ready.

Step 1: Install the Builder Plugin

Go to the Figma Community and search for “Builder.io” or “Visual Copilot” and then install the plugin.

You’ll want to use the auto layout option in Figma. This helps the AI understand your layout better (margins, spacing, and responsiveness). A clean Figma design means better code output.

Step 2: Link Your Components

This step makes Builder.io special. You “teach” the AI what each part of your design actually means.

Example: Tell it, “When you see this Figma Button, use my real <PrimaryButton /> React component.” This way, it doesn’t just copy pixels. Instead, it builds real, reusable components that match your existing codebase.

Step 3: Export Your Figma Design

Once the components are mapped, exporting is simple:

Select the design frame you want.
Open the Builder plugin and click “Smart Export.”
The plugin copies all the important layout and style data automatically.

Step 4: Paste and Prompt the AI

Now switch to Builder.io Fusion. This is where the AI magic happens. Paste what you copied from Figma into the AI input box. Then just add your prompt, making sure it’s short and clear.

Example: “Build this as a React component named ProductCard.” You can also specify small tweaks like “Make this layout stack vertically on mobile.”

Step 5: Review and Refine

Builder.io shows you a live preview of the generated code.

Check the result: Does it look and behave like your design?
Make tweaks: You can ask the AI for updates directly, like “Increase font size” or “Add hover effect.”
Create your PR: Once you’re happy, Builder.io helps you send it directly to GitHub as a Pull Request.

I found it too technical to simply convert a simple Figma design into code.

Benchmark 3: Real-Time Sandbox Preview

All the tools mentioned in this blog provide a live sandbox preview where you can see the generated output instantly.

This reduced the guesswork — I didn’t have to export, clone, or rebuild just to check how it looked.

Benchmark 4: Repo Analysis & Documentation

Repo analysis is the ability to scan your GitHub repo, generate summaries, and even suggest architectural improvements. This feature alone could save hours of onboarding time for new developers joining a project.

I tested this feature for

V0 - The Vercel repos can be connected easily, but understanding the complete code and context is still not available.

Builder.io- It performs repository analysis not just for understanding, but for the explicit purpose of generating code that is interoperable with and dependent on your existing architecture.

Kombai -I also tested repo intelligence by connecting an existing as well as a old project, which generated a full PROJECT_ANALYSIS.md file — summarising app’s structure, tech stack, and potential improvements.

Benchmark 5: Smart Planning Phase

The smart planning phase helps build an application before taking any action. It presents a detailed “plan” outlining what it will build. You can approve or modify this — giving you total control, just like working with a teammate.

It’s like having a junior developer who walks you through their approach before writing code.

V0: It skips this stage and starts generating output directly from the given prompt or Figma input. While it’s fast, you often need several prompt iterations to align the output with your expectations.

Builder.io: It offers partial planning through its component mapping step, where you define how Figma components connect to existing code. It’s useful, but more manual and setup-heavy any automatic planning phase.

Kombai: Instead of rushing into generation, Kombai first asks for confirmation before making changesits an automatic system by default.

Benchmark 6: Responsiveness and Design Fidelity

V0, on the other hand, focuses more on functional React/Tailwind output than pure design precision. It captures structure well but often requires post-generation adjustments to match the original Figma layout.

Builder.io delivers strong design accuracy when working with mapped components, but it sometimes simplifies layouts to maintain consistency with your design system.

Kombai preserves the design fidelity from Figma to code. Even typography, colour palettes, and animations carry over seamlessly.

Benchmark 7: Code Quality & Structure

V0 also generates solid and clean React + Tailwind code but leans heavily on its internal conventions, making customisation trickier. It also uses Shadcn component by default until explicitly asked to use something else

Builder.io prioritises no-code flexibility; while its code export is clean, it’s more suited for CMS-driven projects than heavy custom logic.

Kombai-generated code isn’t bloated or minified. It’s readable, clean, and production-grade — making handoff between design and dev smooth.

Benchmark 8: AI Agent Mode

V0 has a prompt-driven system too, but it’s less conversational and context-aware — it works well for isolated code generation, not project-level edits.

Builder.io is more rule-based, with minimal AI-driven modification features.

Kombai: You can talk to it like an assistant — ask it to refactor files, add sections, or explain existing code.

It understands context and acts on real project data, not just prompt guesses.

Benchmark 9: Cross-Platform Vision

V0: remains web-focused (optimised for React + Next.js).

Builder.io: supports multiple frameworks (React, Angular, Vue) but stays primarily within the browser ecosystem.

Kombai isn’t limited to web — it can also handle React Native, making it a powerful tool for both web and mobile developers.

Target Audience

Kombai – For Developers Who Want AI Inside the Codebase

Best suited for frontend developers who want AI as a coding partner rather than just a design converter.
Ideal if your workflow includes both design-to-code automation and repository-level analysis.
Think of Kombai as an AI teammate that understands your project, not just your Figma design.

V0 (by Vercel) – For Speed-Focused Frontend Developers

Built for developers who want fast UI generation without leaving Vercel’s ecosystem.
Perfect for rapid prototyping or spinning up functional interfaces in minutes.
If your focus is efficiency and integration with Next.js workflows, V0 is a solid choice.

Builder.io – For Product and Marketing Teams

Great for teams who need visual control over design and content without diving deep into code.
Works best when you want a no-code or low-code workflow that still respects your design system.
Ideal for marketers, designers, or PMs who want to update layouts and pages independently.

Feature Table

I have built this table to show how the different tools perform on each benchmark. It will give you a complete idea about what’s going on

Feature / Phase

Kombai

V0 (by Vercel)

Builder.io

Setup & Integration

• Direct VS Code extension for instant setup. • Connects with Figma & GitHub. • Auto-generates a Plan Phase outlining build steps.

• 100% web-based; paste Figma link or prompt. • Optimized for Next.js & Vercel deployment. • No local IDE setup required.

• Drag-and-drop visual builder. • Integrates via SDKs/APIs for React, Angular, Vue. • Expansive plugin ecosystem for dev tools.

Figma-to-Code Workflow

• One-click import of Figma design link. • Auto-fetches layouts inside VS Code agent. • Outputs pixel-perfect React or React Native components with responsive logic.

• Converts Figma links or screenshots into React/Tailwind code. • Includes iterative AI refactoring.

• Converts visual design blocks into reusable components. • Requires page mapping for deeper Figma code integration.

Live Preview / Sandbox

• Real-time sandbox preview inside VS Code. • Updates instantly when code is modified.

• Browser-based preview for Next.js environments. • Syncs with Vercel’s live deployment previews.

• True WYSIWYG editor; visual changes reflected instantly. • Live sync with backend CMS.

Repo & Code Intelligence

• Performs full repo analysis. • Generates PROJECT_ANALYSIS.md summarizing architecture. • Suggests structural and performance improvements.

• Project-aware but limited repo insights. • Primarily focused on UI generation.

• No code-level repo analysis. • CMS-focused integration instead of repository parsing.

Code Quality & Structure

• Clean, readable React code with proper naming conventions. • Modular, reusable components with prop management. • No minified or bloated output.

• Auto-generated React/Tailwind code. • Readable but may require manual refinement.

• Clean component bindings, but limited control beyond visual UI.

AI Assistance / Agent Mode

• Full conversational AI agent inside IDE. • Can refactor, modify, and explain code contextually. • Understands real project context.

• Basic chat-style UI component generator. • Limited contextual awareness.

• Minimal AI — primarily rule-based logic for layout generation.

Design Fidelity

• Near pixel-perfect accuracy for typography, spacing, colour, and animation.

• Medium fidelity; optimised for speed and developer control.

• Visual-first; sometimes diverges from original Figma layouts.

Responsiveness

• Auto-detects mobile breakpoints. • Generates adaptive layouts natively.

• Supports responsive design with limited manual controls.

• Fully responsive UI is possible but often requires tweaking.

Cross-Platform Capability

• Supports both Web and React Native builds.

• Web-focused (React + Next.js).

• Web and CMS-powered apps (React, Angular, Vue).

Target Audience

• Developers who want AI inside the codebase. • Ideal for design-to-code + repo analysis workflows.

• Frontend developers who need fast UI generation within Vercel’s ecosystem.

• Product and marketing teams seeking visual control with minimal coding.

Unique Differentiator

Combines agentic AI + repo intelligence + Figma-to-code in one continuous workflow.

Deeply integrated with Vercel’s hosting and deployment pipelines.

Highly visual CMS-powered builder for content-driven sites.

Overall Verdict

Developer-first approach that seamlessly merges Figma, repo analysis, and AI-assisted coding.

Great for rapid prototyping and quick Next.js frontends.

Best suited for designers and content teams needing flexible, visual control.

I have also seen some areas where I think making small improvements will make this awesome tool better

A Few Areas to Improve

Even though all the agents performed exceptionally, here are some things I noticed that can make all even better:

Figma Auth Flow: Occasionally re-asks for connection; smoother OAuth handling would help.
Tech Stack Memory: Sometimes retains old stack choices — needs a clearer “Confirm Stack” UI.
Session Management: The Ability to reset or switch projects quickly would streamline workflow.

These are small usability fixes, not performance issues.

How to give proper context and prompt to AI Agents/tools

When I have to speak to masses on any topic, I always say one thing first, that “I am only responsible for what I speak, not for what you listen” by saying this, I make sure that people don’t get confused they hear and understands me clearly similar process is followed by AI tools as AI tools are trained on predefined data sets and to fetch the exact information or get any task done you will have to give clear instruction to any AI tool let tell me you a small story Imagine you’ve just met a super-intelligent assistant — an AI who can write, design, analyze, and even brainstorm ideas with you. But here’s the catch: this AI doesn’t read your mind. It only understands what you say. So, if you want great results, you have to talk to it clearly — like explaining your idea to a teammate who’s brilliant but new to your project.

That’s where the art of giving the right prompt and context comes in.

The Power of Context

Think of context as the background story. Without it, the AI is like a painter who doesn’t know what scene you want.

To give the right context, you can do a few things:

Define roles: Tell the AI who you are and what role you want it to play.

For example: “You’re a marketing expert helping me write a blog post.”
State your goal: Explain why you’re asking.

Are you trying to get information, write an article, or brainstorm ideas?
Add details: Give as much background as possible — facts, examples, or the situation you’re dealing with.
Identify your audience: Let the AI know who will read or use the final output.

Is it for professionals, everyday readers, or kids?

This helps the AI choose the right tone and vocabulary.

The Craft of a Prompt

Once your context is set, the prompt is your actual instruction — the “what to do.”

Here’s how to make it powerful:

Be clear and specific: Avoid vague or complicated sentences. Use straightforward language.
Break it down: If your task is big, divide it into steps.

Like: “First do this, then that, and finally summarize.”
Show examples: Demonstrate what kind of result you’re expecting.
Set tone and format: Tell the AI how to reply — formal, friendly, or creative — and in what format — list, paragraph, or table.
Set limits: Mention what you don’t want in the answer, so it stays focused.

A Quick Example

Let’s see the difference between a weak prompt and a strong one.

❌ Weak Prompt:

“Tell me something about history.”

✅ Improved Prompt:

Role: “You’re a history professor.”
Context: “I’m preparing a presentation for college students.”
Goal: “I need a summary of the main causes and results of World War II.”
Format: “The information should be in bullet points.”
Tone: “Keep it simple and easy to understand.”

✅ Best Prompt (all in one):

“You’re a history professor, and I’m creating a presentation for college students about World War II. Please give me a brief summary of the major causes and outcomes of the war in bullet points, using clear and easy-to-understand language.”

Q&A

How much experience do I have with tech and AI tools?

I’ve been a software engineer for several years, working across multiple technologies and building products for a variety of domains. My journey with AI started back in college, where my final-year project focused on AI. Since then, I’ve been exploring AI tools extensively, testing their capabilities, and leveraging them to deliver projects efficiently within tight timelines. So yes—I have practical experience and a solid understanding of AI.

Methodology & Disclosure

For fairness, I used one common Figma design (linked above) and the same control prompt across tools where possible. I performed hands-on testing with Kombai, V0 and Builder.io (VS Code extension) and captured live previews, generated components, and repo analysis artefacts (screenshots in the demo gallery).

Responsible use of AI in code generation

While AI accelerates design-to-code workflows, developers must still review generated outputs for maintainability, accessibility, and long-term performance.

Why am I writing about Frontend AI tools?

This is an important question. Being a frontend developer myself for 5 years, I have had the opportunity to work with all the top tools like Figma, Adobe XD and Canva, etc, for designing applications. As I am a developer, I had to convert the designs into working code now, since AI is dominating everywhere. I had the chance to automate my design to code work using AI.

What’s my experience with AI tools?

From my experience, I’ve been using tools like Kombai, V0, Builder.io, Replit and Cursor for my development workflow; all have worked well, but sometimes they break or make something I never asked them to do. The type of work decides the type of tool, like for backend, Cursor is good, and for frontend, Kombai, which is what I am working on.

What’s the code quality produced by the Tools?

The code quality is impressive. I’ve deployed multiple frontend projects generated by such agents for clients, and after rigorous reviews, no client has reported UI/UX issues. Everything works smoothly and reliably.

Most of the frontend code is safe until it throws a bug, but still, I prefer to do a rigorous code review for frontend and backend.

How can I get AI tools for testing?

It’s simple: visit the respective website of the tools and do a simple sign-up. Most of the tools have free AI credit limits.

Final Notes

Using AI to accelerate your work is a valuable skill—but relying on it entirely can backfire. When AI starts hallucinating or fails to deliver exactly what you need, the responsibility falls on you to fix it and reach the desired outcome.

Frontend development, in particular, can be challenging. Before using any AI tool to complete a task, make sure you understand the fundamentals of the technology and your chosen stack. This knowledge is often underrated but incredibly useful in the long run.

In this blog, I’ve shared what I’ve found most helpful while working with Frontend AI tools. The market is full of high-level solutions from tech giants, but many emerging tools are delivering top-notch results, competing at the same level and sometimes even surpassing big names.

AI won’t take your job—but a developer with AI skills certainly will.

Conclusion

In practice, these tools free up hours of manual layout work — but they don’t replace developer judgment. They accelerate the repetitive parts so you can focus on logic, architecture, and user experience, where developers can focus on building good projects, not hustling to copy and paste CSS from Figma to the IDE.

I wrote this blog to educate about how different tools are available in the market and how you can make the best use of those tools. I have even introduced a long benchmarking guide for developers so that next time, when they have to choose an AI tool for anything how they know how to proceed and using the right tool is more important than chasing 10 different tools.

In my next blog, I will be writing more about something new I have been working on for a long time, and I am contributing to it.

Design+ AI + Development = The Ultimate Developer Stack 🔥

By mastering these skills, you can turn any idea into a real-world product, secure high-paying jobs, and even start your tech venture.

Now it's your turn—what are you building next? Let me know in the comments or DM me! 👇

That’s all from my side. If you found this article helpful, feel free to share it and connect with me. I’m always open to new opportunities:

Follow me on 𝕏: Prankur's 𝕏
Connect with me on LinkedIn: Prankur's LinkedIn
Follow me on GitHub: Prankur’s Github
Follow me on Upstaff: Prankur Pandey
View my Portfolio: Prankur's Portfolio

12 Minutes to Master React: All the Concepts You Need to Know

PRANKUR PANDEY — Sat, 14 Sep 2024 13:34:43 +0000

Ever felt overwhelmed by the jargon in React?

Terms like reconciliation, composition, and error boundaries can sound like a foreign language. Don’t worry—let’s demystify React together. Whether you're just starting out or need a refresher, this guide will break down React's core concepts in a way that's easy to understand.

Intro: The React Wonderland

React is a powerhouse JavaScript library with a lot of fancy terminology. But what do these terms really mean? We’ll start at the very beginning and build up our React knowledge step by step.

---

Components: The Building Blocks

Think of components as the LEGO pieces of your React app. These are the fundamental building blocks that make up everything visible, from buttons to entire pages.

Here’s a simple React component:



function Button() {
  return <button>Click Me!</button>;
}

JSX: JavaScript in Disguise

React components don’t return plain HTML; they return JSX, which stands for JavaScript XML. JSX is a syntax extension that looks like HTML but is actually JavaScript in disguise.



const App = () => (
  <div>
    <h1>Hello, World!</h1>
    <p>This is JSX!</p>
  </div>
);

Curly Braces: Dynamic Magic

One of React’s magic tricks is the use of curly braces {} in JSX. You can insert dynamic JavaScript values directly into your JSX.



const name = "John";
return <h1>Hello, {name}!</h1>;

Fragments: Avoiding Extra Elements

In React, a component can only return one parent element. If you need multiple elements, you can wrap them in a <div>. To avoid unnecessary HTML elements, use React Fragments (<></>).



return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

Props: Passing Data Like a Pro

Props allow you to pass data to components, making them dynamic and reusable.



function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

<Welcome name="Alice" />;

Children: Components Inside Components

You can pass other components as props using the children prop.



function Wrapper({ children }) {
  return <div>{children}</div>;
}

<Wrapper>
  <h1>Nested Content</h1>
</Wrapper>;

Keys: Unique Identifiers

When rendering lists, React needs to uniquely identify each item using the key prop.



const items = ['Apple', 'Banana', 'Cherry'];
return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

Rendering: Making Your Code Visible

Rendering turns your React code into a viewable app using the Virtual DOM, which updates only what’s necessary.

Event Handling: Reacting to User Actions

React handles user interactions through events like onClick and onChange.



function handleClick() {
  alert('Button clicked!');
}

return <button onClick={handleClick}>Click Me!</button>;

State: Keeping Track of Changes

State allows React to track changes in your app. You can manage state using the useState hook.



const [count, setCount] = useState(0);

return (
  <div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>Click me</button>
  </div>
);

Controlled Components: Predictable Behavior

Controlled components ensure form elements’ values are managed by React state.



const [value, setValue] = useState('');

return <input value={value} onChange={(e) => setValue(e.target.value)} />;

Hooks: The Power of Function Components

Hooks like useState, useEffect, and useRef provide state management and side effects in functional components.



useEffect(() => {
  console.log("Component Mounted");
}, []);

Purity: Consistent Outputs

A pure component always returns the same output for the same input. This predictability ensures fewer bugs.



function PureComponent({ name }) {
  return <h1>Hello, {name}</h1>;
}

Strict Mode: Catching Errors Early

React’s Strict Mode helps you catch potential problems early in the development cycle.



<React.StrictMode>
  <App />
</React.StrictMode>;

Effects: Interacting with the Outside World

The useEffect hook lets you handle side effects like data fetching.



useEffect(() => {
  fetch("/api/data")
    .then(res => res.json())
    .then(data => setData(data));
}, []);

Refs: Direct DOM Access

Refs let you interact directly with DOM elements when necessary.



const inputRef = useRef();

function focusInput() {
  inputRef.current.focus();
}

return <input ref={inputRef} />;

Context: Sharing Data Across Components

React Context provides a way to share data across components without prop drilling.



const UserContext = React.createContext();

<UserContext.Provider value={user}>
  <Component />
</UserContext.Provider>;

Portals: Rendering Outside the DOM Hierarchy

Portals let you render components outside of the parent component's hierarchy.



ReactDOM.createPortal(
  <div>Modal Content</div>,
  document.getElementById('modal-root')
);

Suspense: Handling Asynchronous Data

Suspense helps in rendering fallback UI while waiting for async data to load.



<Suspense fallback={<div>Loading...</div>}>
  <AsyncComponent />
</Suspense>;

Error Boundaries: Graceful Error Handling

Error Boundaries catch JavaScript errors and display fallback UIs, preventing app crashes.



class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

By understanding these core concepts, you can dive deeper into the React ecosystem and build sophisticated web applications!

Conclusions
Hope I cleared all your doubts about the React JS and its basic principles,Tell in comments which you liked the most.
You can connect with me here: LINKEDIN
TWITTER

From Zero to Hero: Build Your First React Native App in 1 Hour

PRANKUR PANDEY — Mon, 02 Sep 2024 16:24:00 +0000

1. Introduction

Overview of React Native

What is React Native?
React Native is a JavaScript framework for building mobile apps for Android and iOS It is:

Cross-platform: React Native allows developers to create platform-specific versions of components and use the same codebase for both iOS and Android.
Native components: React Native uses native components instead of web components.
Efficient and versatile: React Native is designed to create apps that are responsive and intuitive.
Based on React: React Native is based on React, Facebook's JavaScript library for building user interfaces.
Supports new JavaScript features:React Native supports new JavaScript (ES6+) features, such as arrow functions and async/await.

Why use React Native for mobile development?
If you are coming from React and JavaScript Background it is pretty easy to pick up React Native , you do not have to learn Java or Kotlin to build Android Apps and Swift for the iOS apps.

Vast library support makes React Native easy to integrate with third party libraries to get the job done.
Huge community support so if you are stuck at something you can ask to the community.

Prerequisites

Basic knowledge of JavaScript and React.
Development environment setup (Windows, macOS, Linux).

2. Setting Up the Development Environment

Installing Node.js
- Based on the OS the NodeJS provide different binaries you go to the nodejs official website and download the binaries once downloaded you can install it easily.
- Installing JDK- Install JDK from official JAVA website or you can also choose any JDK of your choice, the version should be above 17
Installing React Native CLI
- Introduction to React Native CLI vs Expo CLI. React Native apps can be build with two methods one is standard React Native CLI and another is Expo CLI ,expo provides many things preconfigured for the development which you will have to do separately in React Native CLI ,so making apps with expo is bit easy also if you are building with expo you don't need to attach a physical mobile device with development machine expo will give the QR just scan the QR Code with expo go app installed on the phone and you are good to go.
- Here are the commands for Installing expo CLI :npm install --global expo-cli. global is used to install the CLI globally on machine
- Here are the commands for Installing React Native CLI : npx @react-native-community/cli@latest
Setting Up Android Studio (for Android Development)
- Download Android Studio
- Once Android Studio is installed run the Studio and when first time setup occurs check these boxes and click on apply/install
- Android SDK
- Android SDK Platform
- Android Virtual Device
Setting Up Home Environemnt (for Android Development)
- Set Java Home Path
- Set Android Home Path
- Set Android SDK Path
- Set Android Emulator Path
- Set Android Paltform Tools Path I am using Linux so after setting up everything in my bash file it looks something like this

Save the file and restart the system if everything goes well the environment setup is done.

3. Creating Your First React Native Project

Starting a New Project
- Command to create a new React Native project. Run This command in terminal :npx @react-native-community/cli@latest init myAppRun this command and It will generate a new react native project with the name of myApp here is how it looks like after creating project

Explanation of the project structure.

We have multiple folders but I will only focus on important ones, lets understand each folder:

Android : This folder contains android related files such as gradle builds,minmap file responsible for android logo updation etc.
App.tsx : This file holds your whole project anything which holds project data such as pages,components,images can be hold here .
package.json : This is responsible for handling packages/libraries installed as third party in project.
index.js : the file serve as root for the project ,when projects run the builder looks for this file only.
test: the file holds test cases for the project
- Running the Project on an Emulator/Device
I am building the application for the Android so you need an Android Phone and enable USB debugging then connect your phone to the machine and run this command in terminal where your React Native Project is located run this command : npm start

It will launch the app on your phone something like this:
- After launching the app you can see a dummy mobile phone appears it is emulator, therefore we have previously configured Android Home and Emulator tools path.

4.Understanding the Basics of React Native

Core Components
In React Native there are various components and each component has It own uses today I will be discussing about the few main components which I will using in building this project
- Explanation and examples of View, Text, Image, TextInput, Button :
- View : The View component is main components in React Native responsible for displaying anything you can consider this as div of html.
- Text : The Text component is responsible for displaying text like we have paragraphs,heading in html and we have different tags to do this but in React Native to display simple text ,the Text component is used .
- Image : The Image component is same as the Image component of HTML.
- Text Input : The Text Input component is responsible for taking text as input consider this component as text input component of HTML. -** Button :** The Button component is same as the Button component of HTML.
Styling in React Native
- How to style components using StyleSheet : In React Native there are two ways to style components first is inline styling and another is using Stylesheet.,stylesheet takes objects as styles for different style names for each component.
- Using libraries for styling : There are multiple component libraries available in market and each has its own unique components and features libraries work like plug and play working model simply install the library and start importing components.
- Flexbox layout for responsive design: To Achieve responsive design in React Native flexbox is availble ,this flexbox works same as the flexbox of vanilla CSS ,even most of the styles of CSS can be declared and used in React Native.
Handling User Input User input can be handles same as we handle in react using event handlers.

5. State Management in React Native

Using the useState Hook
- In JavsScript if we have to hold the datawe use variables in variables we have three variable methods to do it ,let,var and const these are three data holding points but in React we have hooks like useState to hold the data and use it when needed , same goes for React Native the useState hook of React works in same way it works in ReactJS. Here is an example : ``` import React, { useState } from 'react'; import './App.css';
function App() {
// Step 3: Using useState Hook to handle state
const [count, setCount] = useState(0); //storing data in count variable

// Step 4: Increment and Decrement Functions
const increment = () => {
setCount(count + 1);
};

const decrement = () => {
setCount(count - 1);
};

return (

Simple Counter App
```
    {/* Step 5: Displaying the Count */}
    <p>Count: {count}</p>

    {/* Step 6: Buttons to Increment and Decrement */}
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  </header>
</div>
```
);
}

export default App;
Data and Component Communication
- Data handling is very crucial in every application and supply of data should be consistent in whole application to do this in React Native we can apply same data logic which we use in React like using of states for holding data and later supplying it into the whole app.
- Supply of data in whole app is challenging as there are methods and libraries to do it using like redux,zod etc and there are native methods like ContextAPI and Reducers .If the app size is small we can also use prop dirilling to pass the data .

6. Working with APIs

Fetching Data from an API
- Introduction to fetch and axios. Data fetching is most part in applications as it abstract the backend without exposing business logic,As there are two methods which I personally prefer using for data fetching one is Axios and another is native browser methods Fetch Axios is a third party library built on top of fetch ,fetch is native method of browsers allows data fetching from api url but due to its some limitations and handling of complex HTTP request is bit tricky axios is more popularalso fetch doesn't transform json data while axios does. Also error handling is easy in axios compare to Fetch.

7. Building the React Native App

What I am building I am building a simple React Native Android App where users will get the news every time they click on fetch news button.
Tech Stack
- React Native
- Axios
- News API
Screens First I will be building the sample homepage for the app which looks something like this

Here is the full code of building screens :

``` import React, {useState} from 'react'; import {View, Text, Button, StyleSheet, ActivityIndicator} from 'react-native'; import axios from 'axios';

const Homepage = () => {
const [news, setNews] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

const fetchNews = () => {
  // Set the loading indicator to true and clear out any error messages.
  setLoading(true);
  setError(null);

  // Make a GET request to the News API. We'll pass in some parameters to
  // customize the request. The country parameter is set to the US, but you can
  // change this to any other country code supported by the API.
  // The apiKey parameter is set to your API key that you got when you signed
  // up for the News API.
  // The pageSize parameter is set to 1, which means that we'll only get one
  // article back. If you want to get more articles, just increase this number.
  // Finally, the page parameter is set to a random number between 1 and 100.
  // This is just to make sure that we don't always get the same article.
  axios
    .get('https://newsapi.org/v2/top-headlines', {
      params: {
        country: 'us',
        apiKey: '8e7c1fc79b26406d87a58370170b37a9',
        pageSize: 1,
        page: Math.floor(Math.random() * 100) + 1,
      },
    })
    .then(response => {
      // If the request was successful, set the news to the first article in the
      // response. The response is an object with an articles array in it, which
      // contains the articles.
      setNews(response.data.articles[0]);
      // Set the loading indicator to false, since we're done fetching the data.
      setLoading(false);
    })
    .catch(error => {
      // If the request failed, set the error message to an error message.
      setError('Failed to fetch news');
      // Set the loading indicator to false, since we're done trying to fetch
      // the data.
      setLoading(false);
    });
};

return (
  <View style={styles.container}>
    {loading && <ActivityIndicator size="large" style={styles.loading} />}

    {!loading && !news && !error && (
      <Text style={styles.message}>Click on the button to fetch news</Text>
    )}

    {error && <Text style={styles.error}>{error}</Text>}
    <View style={styles.dataContainer}>
      {news && (
        <View style={styles.newsContainer}>
          <Text style={styles.description}>Author: {news.author}</Text>
          <Text style={styles.title}>News : {news.title}</Text>
        </View>
      )}
      <Button title="Fetch News" onPress={fetchNews} />
    </View>
  </View>
);

};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: 300,
width: 300,
},
loading: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
message: {
fontSize: 20,
},
error: {
fontSize: 20,
color: 'red',
},
newsContainer: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
backgroundColor: 'blue',
padding: 20,
borderRadius: 10,
borderWidth: 1,
borderColor: 'black',
marginTop: 10,
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
description: {
fontSize: 18,
color: 'black',
},
dataContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 300,
marginTop: 10,
},
button: {
marginTop: 10,
},
});

export default Homepage;


Explanation of this code : 


This code is a React Native component called `Homepage` that fetches a news article from the News API and displays it when the user clicks a "Fetch News" button. Here's a detailed breakdown:

### **Imports**

```javascript
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, ActivityIndicator } from 'react-native';
import axios from 'axios';

React: Core library for building user interfaces.
useState: A React hook that allows you to manage state in functional components.
View, Text, Button, StyleSheet, ActivityIndicator: Core components from React Native to build the UI.
axios: A promise-based HTTP client for making requests to a server.

State Management

const [news, setNews] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

news: Stores the fetched news article.
loading: A boolean that tracks whether the app is currently fetching data.
error: Stores an error message if the API request fails.

fetchNews Function

const fetchNews = () => {
  setLoading(true);
  setError(null);

  axios
    .get('https://newsapi.org/v2/top-headlines', {
      params: {
        country: 'us',
        apiKey: '8e7c1fc79b26406d87a58370170b37a9',
        pageSize: 1,
        page: Math.floor(Math.random() * 100) + 1,
      },
    })
    .then(response => {
      setNews(response.data.articles[0]);
      setLoading(false);
    })
    .catch(error => {
      setError('Failed to fetch news');
      setLoading(false);
    });
};

setLoading(true): Activates the loading state.
axios.get(): Makes a GET request to the News API.
- params: Specifies the request parameters:
- country: Fetches news from the US.
- apiKey: Your API key for accessing the News API.
- pageSize: Limits the response to one article.
- page: Fetches a random page to ensure different articles are fetched each time.
setNews(response.data.articles[0]): Stores the first article from the response.
setLoading(false): Deactivates the loading state.
setError('Failed to fetch news'): Sets an error message if the request fails.

Rendering the UI

return (
  <View style={styles.container}>
    {loading && <ActivityIndicator size="large" style={styles.loading} />}

    {!loading && !news && !error && (
      <Text style={styles.message}>Click on the button to fetch news</Text>
    )}

    {error && <Text style={styles.error}>{error}</Text>}

    <View style={styles.dataContainer}>
      {news && (
        <View style={styles.newsContainer}>
          <Text style={styles.description}>Author: {news.author}</Text>
          <Text style={styles.title}>News : {news.title}</Text>
        </View>
      )}
      <Button title="Fetch News" onPress={fetchNews} />
    </View>
  </View>
);

ActivityIndicator: Displays a loading spinner when loading is true.
Message: Displays "Click on the button to fetch news" if no news is fetched yet.
Error Message: Displays an error message if the API request fails.
News Container: Displays the fetched news article's author and title.
Button: Triggers the fetchNews function when pressed.

Styling

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 300,
    width: 300,
  },
  loading: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  message: {
    fontSize: 20,
  },
  error: {
    fontSize: 20,
    color: 'red',
  },
  newsContainer: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'blue',
    padding: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: 'black',
    marginTop: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  description: {
    fontSize: 18,
    color: 'black',
  },
  dataContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: 300,
    height: 300,
    marginTop: 10,
  },
  button: {
    marginTop: 10,
  },
});

container: Centers the content and restricts the view size to 300x300.
loading: Centers the ActivityIndicator over the entire screen.
message: Styles the initial message text.
error: Styles the error message in red.
newsContainer: Styles the news container with centered content, padding, and a blue background.
title and description: Styles for the news title and description text.
dataContainer: Centers and contains the fetched news and button.

Exporting the Component

export default Homepage;

Exports the Homepage component as the default export so it can be used in other parts of the application. After making this page I imported it into my app page like this, app page in react and react native works similar as it abstracts the main index.js file which runs the whole application.

This code sets up the main entry point for a React Native application. It imports and uses a Homepage component within a scrollable view, applying specific styles to position and center the content.

Imports

import { View, Text, ScrollView, StyleSheet } from 'react-native';
import React from 'react';
import Homepage from './Pages/Homepage';

View, Text, ScrollView, StyleSheet: Core components and utilities from React Native.
- View: A container component that can hold other components.
- Text: A component for displaying text.
- ScrollView: A container that allows you to scroll through its child components if they exceed the screen size.
- StyleSheet: A utility for defining component styles in a clean, organized way.
React: The core library for building user interfaces.
Homepage: A custom component that is imported from a local file (./Pages/Homepage).

App Component

const App = () => {
  return (
    <ScrollView>
      <View style={styles.container}>
        <Homepage />
      </View>
    </ScrollView>
  );
};

App: A functional component that serves as the root component of the application.
ScrollView: Wraps the content of the app in a scrollable container, which is useful if the content exceeds the screen height. This allows users to scroll to view all content.
View: A container that holds the Homepage component. The View is styled using the styles.container object.
Homepage: The custom component imported earlier, which is rendered inside the View.

Styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 300,
    width: 300,
    marginTop: 300,
    marginLeft: 50,
  },
});

container: An object containing styles applied to the View component wrapping the Homepage component.
- flex: 1: Makes the container take up the available space on the screen.
- justifyContent: 'center': Vertically centers the content within the View.
- alignItems: 'center': Horizontally centers the content within the View.
- height: 300: Sets the height of the View to 300 units.
- width: 300: Sets the width of the View to 300 units.
- marginTop: 300: Adds 300 units of space above the View.
- marginLeft: 50: Adds 50 units of space to the left of the View.

Exporting the Component

export default App;

Exports the App component as the default export so it can be used as the main entry point of the application.

Here is what our final app looks like

Build you app

Now our app is ready but we have finally build our first android app using React Native without expo ,Its time to get the fascinated apk file so that you can install and distribute your app easily .

To achieve this simply run this command in your android folder

First navigate to the android folder of your project

Run this command :./gradlew assembleRelease

It will generate an apk file into your android folder.

You can find the apk into the build folder of android folder inside outputs<apk<release as we have used relase command to build the apk .

here is the snippet :

Summary

The App component uses a ScrollView to ensure that if the content overflows the screen height, it can be scrolled.
The Homepage component is placed within a View that is centered on the screen with specific height, width, and margins.
The styles.container object defines how the View should be styled, including its position and dimensions.

This setup provides a simple and structured way to display the Homepage component in a scrollable, centered manner.

Final Screens:

The final screens are out here as you can see when we click on fetch news buttons we get a news and its author and when we don't have any news to display its ask us to click on news button to fetch news.

Conclusion

Building anything is easy if know what tools to use and how to use them ,When I build my first react native app it took me 15 days to navigate to through various errors but I didn't give up and troubleshooted everything resulted in successful android build.
This app is very simple but no matter how complex apps you are building the fundamentals are always be same.

If you need source code ping me .
Thanks for reading ...!
Keep coding...

10 Game-Changing VS Code Extensions Every Dev is Using in 2024

PRANKUR PANDEY — Fri, 30 Aug 2024 14:06:12 +0000

Introduction

A Developer will have to spend a lot of time while developing products Product development is an entire lifecycle where you have to counter errors and solve them to proceed further.

While solving errors, it become very hectic to keep a track of the development phase in which you have to keep multiple things active such as development environment,file structure,configurations,databases,deployment etc.

To solve all these problems, there are multiple tools available in the market but you can’t predict which one is going to work for you or not ?

Hers is my Tech Stack :

OS : Linux (Ubuntu)
Code Editor : VSCode
Terminal : WARP
Programming Languages : JavaScript,TypeScript
Front End : React JS,Next JS,React Native
Backend : NodeJS ,Express JS
Scripting : Python,Bash
Database :MongoDB,MYSQL
Cloud : AWS
Others : Appwrite
Code : Github/Git
Browser : Chrome
Testing :Jest,Selenium
Security Testing : Burp Suite
Data Analysis : numpy,pandas,matplotlib,D3JS

As you can notice, I deal with variety of tools to get my developer job done it becomes really hectic to manage various things on development .Here are my personal favorites VS Code Extensions, which I use on daily basis to boost up my productivity and save a lot of time .

Auto Close Tag

Auto Close Tag is one of the most used extensions in my daily development process as it helps to auto close the tags. Let's understand by an example: suppose you have an html file and as per the standard standard, you have to define the html tag at the top which starts with <html>`as the open tag is declared at the top it must have to be closed at the bottom like this: </html> declaring every-time closing tags manually consumes time, especially in big files and sometimes it leads to errors if you forget to close the tag at the bottom.

This extension takes care about closing tags intelligently so you don’t have to spend time .

Auto Import

In big projects where multiple files, components, and pages are used, they would have to linked to each other, If the files are not linked well with each other, it throws an immediate error and breaks the whole app, Auto Import works very well and takes care of it very well .

You can make pages, components, and files and simply declare it on the places where its is required you will get an immediate prompt with the same page,components,files name just click on the prompt and you are good to go , you data is imported without manually configuring the files.

Console Ninja

Console Ninja my most favorite tool ,the tool allows you to directly see the console.log outputs into the Code editor itself without looking into the browser. Simply install it and every time you declare a console.log to display output of anything you are going to directly see the output in the VSCode itself without accessing the developers tools on the browser.

ES7 React Redux Snippets

This extension turbocharges your React development by providing shorthand snippets for common tasks. Instead of typing out boilerplate code for components, hooks, or Redux, you can generate it instantly with a few keystrokes, for examples Type rfc to create a React functional component template in seconds, saving time and reducing errors.

Inttelicode

Microsoft’s IntelliCode is an AI-powered tool that enhances your coding efficiency by providing intelligent code suggestions tailored to your unique coding style. It learns from your codebase and improves its recommendations over time, the example is When writing a function, IntelliCode suggests the most relevant methods or properties, helping you code faster and more accurately.

Thunder Client

Thunder Client is a lightweight REST API client integrated into VS Code, making it easy to test APIs directly within your development environment. It’s fast, intuitive, and ideal for quick API testing without leaving your editor. Use Thunder Client to send GET, POST, PUT, or DELETE requests to your API endpoints and inspect the responses, all without switching to a separate tool.

Turbo Console Log

Turbo Console Log automates the tedious process of adding console.log statements to your code, allowing you to quickly insert and manage logs with just a few commands. It’s a huge time-saver for debugging. Highlight a variable, and with a shortcut, Turbo Console Log will insert a console.log statement for it, making debugging swift and efficient.

WakaTime

WakaTime is a time-tracking extension that gives you insights into your coding habits. It automatically tracks the time you spend on different projects, helping you understand where your efforts are going. Review your weekly WakaTime dashboard to see which languages, projects, and files consumed most of your time, allowing you to optimize your workflow.

Prettier

Prettier is an opinionated code formatter that ensures your code is consistently styled, no matter who wrote it. It automatically formats your code according to predefined rules, reducing stylistic debates and making your codebase cleaner. After writing a block of code, Prettier formats it on save, aligning indentations, fixing spacing, and making your code look polished.

Colorize

Colorize enhances your CSS and JavaScript development by visualizing color values directly in your editor. It displays the actual color represented by a color code, making it easier to choose and adjust colors in your projects. example When working with #ff5733, Colorize instantly shows the color swatch beside the code, so you can see exactly what color you’re working with.

Conclusion

Tools are the friend of developers using it enhances the prodcutivity and saves the time resulting in better output and gives a chance to solely focus on other critical work.

If you have not started optimizing VSCode to the fullest you are leaving a good chance to save time and efforts .

Build Your Own Productivity App in React JS Using Mock APIs: A Step-by-Step Guide for 2024

PRANKUR PANDEY — Sun, 23 Jun 2024 08:10:44 +0000

Building your own Productivity app using React JS and Mock API's

Productivity apps are the bless to humanity as it allows to effectively manage and create the tasks and notes and also according to the psychology writing down your thoughts the biggest anxiety killer.

Have you ever thought of building your own Note taking app clone like google keep with some advance features, I know that's big to develop and maintain but as a side project you can definitely try it out to test your skills and feel what it is like to develop your small version of a note taking app with an addition to some more features on top of it.

Today I will be guiding you to develop your version of the small note taking app with some new features keeping all the important features of google keep.

I will be using the React JS, Tailwind CSS and Mock API's.

Folder Structure of the Project

I will be using the standard folder structure to separate components and pages as it allows better management of files and data and improves the navigation inside the project.

The Folder structure snippets are here you can see :

Inside the main src directory I have separated the files and folders for everything backend folder is handling the all mock backend stuff, components folder has components that I will be using in the project as React allows me to break down big pages into components and later I can also reuse the components.

Context folder has the useContext React API which is helping us in projects to manage the states the folder has useReducers code.

The pages folder is all about pages where each page of our app is assembling the components.

The services folder has the API calling methods there I am calling the APIs and storing the response.

Utils contain important code and small libraries or something that is not very common.

The rest of the files are related to projects in which the App.js file is important as it is the main file that holds the entire application.

Let's Build

Generally I have Figma Files for the inspirations and developers utilise the pre-existing desigs to turn them into code.

Figma Files has all the designs about product development in form of pages therefore its suitable to first develop the pages to get an details overview of pages and how they are interlinking.

This will also give you an overview of the application like how many pages you will need and which page will host and display what type of data.

If you have a situation where you have to show multiple pages and the count of the pages will increase with time then it would be technically impossible to make so many pages but React has a special library where you can make as many pages as you want with respect to some unique URL, to do so I will use React Router which allows to make dynamic pages.

This application has :

Welcome page
Home page
Archives page
Trash page
Editnotes page
Label page
Login page
Signup page
Account page

Welcomepage

The Welcomepage is very simple and minimal it only reflects that what is our application is all about and how does it work how many features it has and how to use the application.

The page contains Header, banner and footer components and I will be using the same header and footer across the app.

The welcomepage looks like this

You can also see the React code for building the welcomepage



import { Footer, Header, Hero } from "../Components/IndexAllComponents";
function Welcomepage() {
  return (
    <div>
      <Header />
      <Hero />
      <Footer />
    </div>
  );
}
export default Welcomepage;

How clean the code is,isnt it ? That's why I follow standard coding practices and folder structure to improve the overall look of the code so that even a beginner can understand.

Homepage

The home page has the ,header,sidebar,footer and a filter section on top which automatically filters the notes based on their priority which are selected at the time of note creation.

The Sidebar has multiple options and each option redirects to the page the pages are Homepage.Archive Page, Trash page and Accounts page .

Homepage is the main page where notes are being displayed ,Archives page shows the notes which are archived , Trash Page has the all notes pushed to Trash and Accounts page has the details about the users and their data.

The page looks like this after it gets loaded :

You can also see the React code for building the Home page



import { React, useEffect } from "../Utils/CustomUtils";
import { useNoteTakingContext } from "../Context/IndexAllContext";

import "./Homepage.css";
import {
  Filters,
  Footer,
  Header,
  NotesCard,
  NotesModal,
  Sidebar,
} from "../Components/IndexAllComponents";
import { getNotesDataFromAPIFn } from "../Services/NoteTakingServices";

function Homepage() {
  const { finalData, notesTakingFn, priorityData } = useNoteTakingContext();
   useEffect(() => {
    getNotesDataFromAPIFn(notesTakingFn);
  }, []);
  return (
    `<div>`
      `<Header />`
      `<Sidebar />`
      `<Filters />`

    `<div>`
        {finalData.length <= 0 ? (
          `<h1 className="header-text">`
            No notes to display in Homepage , add some from
            `<NotesModal />`
          `</h1>`
        ) : (
          `<div className="notes-container">`
            {priorityData &&
              priorityData.map((notes) => (
                <NotesCard notesData={notes} key={notes._id} />
              ))}
          `</div>`
        )}
      `</div>`

    `<Footer />`
    `</div>`
  );
}

export default Homepage;

This code defines a React component named Homepage. The component imports various utilities, context hooks, CSS styles, UI components, and a function to fetch data from an API. Within the Homepage function, the useNoteTakingContext hook is used to access data and functions related to note-taking.

Upon mounting, the useEffect hook triggers a call to fetch notes data from an API using the provided function. The returned data is then used to update the context.

The component's JSX structure includes several imported UI components such as Header, Sidebar, Filters, and Footer. The main content area conditionally displays a message prompting users to add notes if no notes are available. If notes are present, it maps over the priorityData array to render NotesCard components for each note.

Finally, the Homepage component is exported as the default export, making it accessible for use in other parts of the application.

Archives page

Archive page is the place where I can see the archived notes , this page is used to hide the notes without permanently deleteing it ,if there is a note which I don't want anyone to see it I can move that note to archive.

When I create a new note I get an option to move this perticular note to Archive page when the note is moved to archive page I also get the option to restore it as normal note and once the note is back to normal state I can see it on homepage.

The page looks like this :

Here is the code snippet :



import { React, useEffect } from "../Utils/CustomUtils";
import { useArchiveContext } from "../Context/IndexAllContext";
import {
  ArchiveNotesCard,
  Footer,
  Header,
  Sidebar,
} from "../Components/IndexAllComponents";
import { getArchiveNotesFn } from "../Services/ArchiveNotesServices";

function Archivespage() {
  const { getArchivedNotes, notesArchiveFn } = useArchiveContext();

  useEffect(() => {
    getArchiveNotesFn(notesArchiveFn);
  }, []);

  return (
    <div>
      <Header />
      <Sidebar />

      <div>
        {getArchivedNotes.length <= 0 ? (
          <h1 className="header-text">
            {" "}
            No notes to display in archive page, add some !
          </h1>
        ) : (
          <div className="notes-container" style={{ marginTop: "5rem" }}>
            {getArchivedNotes.map((archivenotesdata) => (
              <ArchiveNotesCard
                archivenotesdata={archivenotesdata}
                key={archivenotesdata._id}
              />
            ))}
          </div>
        )}
      </div>
      <Footer />
    </div>
  );
}

export default Archivespage;

This code defines a React component called Archivespage, which displays archived notes. Here's a detailed explanation of its structure and functionality:

Imports:

React and useEffect are imported from a custom utilities file.
The useArchiveContext hook is imported to access context data related to archived notes.
CSS styles for the component are implicitly referenced through the JSX structure.
Various UI components such as ArchiveNotesCard, Footer, Header, and Sidebar are imported from a central components file.
A function to fetch archived notes from an API is imported from a services file.
1. Function Declaration:
The Archivespage component is defined as a functional component.
Within this component, the useArchiveContext hook is used to extract getArchivedNotes (an array of archived notes) and notesArchiveFn (a function for handling notes archiving).
1. useEffect Hook:
The useEffect hook is used to perform a side effect when the component mounts. It calls the getArchiveNotesFn function with notesArchiveFn as an argument to fetch archived notes from an API and update the context.
1. Rendering:
The component returns JSX markup to define its structure.
It includes several UI components such as Header, Sidebar, and Footer.
In the main content area, it conditionally renders a message if there are no archived notes available, prompting the user to add some.
If there are archived notes, it maps over the getArchivedNotes array and renders ArchiveNotesCard components for each archived note, passing the note data as a prop.
1. Export:
The Archivespage component is exported as the default export, making it accessible for use in other parts of the application.

Overall, the Archivespage component is responsible for fetching and displaying archived notes, incorporating various UI elements, and conditionally rendering content based on the availability of archived notes.

Trash Page

Trash Page hold the notes which are moved to Trash basicaly I want to remove the notes from the system so I can use Trash option which I get when I create a new note ,this Trash page also acts as recyle bin because I get an option to restore the notes to normal and also get the option permanently remove the notes from the system.

The page looks like this :

Here is the code snippet :



import { useEffect } from "../Utils/CustomUtils";
import { useTrashNotesContext } from "../Context/IndexAllContext";
import {
  Footer,
  Header,
  Sidebar,
  TrashNotesCard,
} from "../Components/IndexAllComponents";
import { getTrashedNotesFn } from "../Services/TrashNotesServices";

function Trashpage() {
  const { getTrashedNotes, notesTrashFn } = useTrashNotesContext();

  useEffect(() => {
    getTrashedNotesFn(notesTrashFn);
  }, []);

  return (
    <div>
      <Header />
      <Sidebar />
      <div>
        {getTrashedNotes && getTrashedNotes.length <= 0 ? (
          <h1 className="header-text">
            No notes to display in trash page, add some ..!
          </h1>
        ) : (
          <div className="notes-container" style={{ marginTop: "5rem" }}>
            {getTrashedNotes &&
              getTrashedNotes.map((trashnotesdata) => (
                <TrashNotesCard
                  trashnotesdata={trashnotesdata}
                  key={trashnotesdata._id}
                />
              ))}
          </div>
        )}
      </div>
      <Footer />
    </div>
  );
}

export default Trashpage;

This code defines a React component named Trashpage, which handles the display of trashed notes. Here's an explanation of its components and functionality:

Imports:

The useEffect hook is imported from a custom utilities file.
The useTrashNotesContext hook is imported to access context data and functions related to trashed notes.
Various UI components such as Footer, Header, Sidebar, and TrashNotesCard are imported from a central components file.
A function to fetch trashed notes from an API is imported from a services file.
1. Function Declaration:
The Trashpage component is defined as a functional component.
Within this function, the useTrashNotesContext hook is used to extract getTrashedNotes (an array of trashed notes) and notesTrashFn (a function for handling trashed notes).
1. useEffect Hook:
The useEffect hook is used to perform a side effect when the component mounts. It calls the getTrashedNotesFn function with notesTrashFn as an argument to fetch trashed notes from an API and update the context.
1. Rendering:
The component returns JSX markup to define its structure.
It includes several UI components such as Header, Sidebar, and Footer.
The main content area conditionally renders a message if there are no trashed notes available, prompting the user to add some.
If there are trashed notes, it maps over the getTrashedNotes array and renders TrashNotesCard components for each trashed note, passing the note data as a prop.
1. Export:
The Trashpage component is exported as the default export, making it accessible for use in other parts of the application.

Overall, the Trashpage component is responsible for fetching and displaying trashed notes, incorporating various UI elements, and conditionally rendering content based on the availability of trashed notes.

Editnotes page

We human commit mistakes as the mistakes could happen anywhere and anytime so having an option to corrent it is like a blessings therfore in this note taking app I can also make mistaked while composing notes but I have an option to edit the notes and correct the mistakes and again republish the notes.

An edit option is a feature which allows to fix the problems and this perticular feature is tough to develop as its the backbone of note taking system.

Look into this picture :

As you can see this is the first note which we have made it has title,a paragraph for details,labels,priority,when the note was created,edit icon to edit note,trash icon to move notes to trash , archive note icon and when the note was created on what date and time , the option when the note was updated(edited) is empty.

Look into this image :

In this picture you can clearly see an updated note from the previous image the title,paragraph,label is updated and the note updation date and time is clearly mentioned on note itself,I can also change the background color of note while editing the note.

here is how note compose and edit form looks at the page :

here is the code :



import {
  EditForm,
  Footer,
  Header,
  Sidebar,
} from "../Components/IndexAllComponents";

function Editnotespage() {
  return (
    <div>
      <Header />
      <Sidebar />
      <EditForm />
      <Footer />
    </div>
  );
}

export default Editnotespage;

This code defines a React component named Editnotespage. Here's an explanation of its components and functionality:

Imports:

The EditForm, Footer, Header, and Sidebar components are imported from a central components file.
1. Function Declaration:
The Editnotespage component is defined as a functional component.
1. Rendering:
The component returns JSX markup to define its structure.
It includes several UI components: Header, Sidebar, EditForm, and Footer.
- Header: Typically displays the top navigation or title.
- Sidebar: Usually contains navigation links or additional options.
- EditForm: A form component for editing notes.
- Footer: Typically displays the bottom navigation or additional information.
  1. Export:
The Editnotespage component is exported as the default export, making it accessible for use in other parts of the application.

Overall, the Editnotespage component serves as a page layout that includes a header, sidebar, an editing form for notes, and a footer. It is responsible for providing a structured interface for editing notes within the application.

Label page

When I create a new page I get an option to add label to that specific note , when I will have too much notes It will be difficult to handle and find each note so I added this feature to filter out notes from the sidebar menu once the note is created with specific label that label will be automatically added to sidebar I can easily find the note by clicking on that perticular label.

I have added to notes with the same label name demo and both of the notes are visible on demo page ,the acess to demo page was given through the sidebar where demo label is added when the note was created and demo as label was gievn there.

here is the code snippet :



 import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
import { Footer, Header, Sidebar } from "../Components/IndexAllComponents";
import LabelNotesCard from "../Components/NotesCard/LabelNotesCard";
import { useNoteTakingContext } from "../Context/NotetakingContext";
import { getNotesDataFromAPIFn } from "../Services/NoteTakingServices";

function Labelpage() {
const { notesTakingFn, getNotesData, priorityData } = useNoteTakingContext();

const params = useParams();

const labeledData = priorityData.filter(
(f) => f.labelInputBoxValue === params.label
);

useEffect(() => {
getNotesDataFromAPIFn(notesTakingFn);
}, []);

return (
<div>
<Header />
<Sidebar />
<div className="notes-container" style={{ marginTop: "5rem" }}>
{labeledData &&
labeledData.map((labeledNotesData) => (
<LabelNotesCard
           key={labeledNotesData._id}
           labeledNotesData={labeledNotesData}
         />
))}
</div>
<Footer />
</div>
);
}

export default Labelpage;

This code defines a React component named Labelpage, which is responsible for displaying notes filtered by a specific label. Here's an explanation of its components and functionality:

Imports:

React and useEffect are imported from the React library.
The useParams hook is imported from react-router-dom to access route parameters.
Several UI components (Footer, Header, Sidebar) are imported from a central components file.
The LabelNotesCard component is imported from a subdirectory.
The useNoteTakingContext hook is imported to access note-taking context data.
A function to fetch notes data from an API is imported from a services file.
1. Function Declaration:
The Labelpage component is defined as a functional component.
Inside this component, the useNoteTakingContext hook is used to extract notesTakingFn, getNotesData, and priorityData from the context.
The useParams hook is used to get the label parameter from the URL.
1. Filtering Data:
The labeledData variable is created by filtering the priorityData array to include only notes with a label that matches the label parameter from the URL.
1. useEffect Hook:
The useEffect hook is used to fetch notes data from an API when the component mounts. It calls the getNotesDataFromAPIFn function with notesTakingFn as an argument to update the context.
1. Rendering:
The component returns JSX markup to define its structure.
It includes the Header, Sidebar, and Footer components.
It renders a container for notes with a margin at the top.
Inside the container, it maps over the labeledData array and renders a LabelNotesCard component for each filtered note, passing the note data as a prop.
1. Export:
The Labelpage component is exported as the default export, making it accessible for use in other parts of the application.

Overall, the Labelpage component is responsible for fetching notes data, filtering the notes based on the label from the URL parameter, and displaying the filtered notes using the LabelNotesCard component along with other UI elements like the header, sidebar, and footer.

Account manager page

The account manager page shows the data related to your account where I am showing how many notes I have created, what's my name and email and phone number.

Here is what the page looks like :

in this image I have a special unique used Id , my name and email along with the how many notes how I have created here I have made 3 notes therefore 3 notes are showing.

Here is the code snippet :



import {
  Account,
  Footer,
  Header,
  Sidebar,
} from "../Components/IndexAllComponents";

function Accountpage() {
  return (
    <div>
      <Header />
      <Sidebar />
      <Account />
      <Footer />
    </div>
  );
}

export default Accountpage;

This code defines a React component named Accountpage. Here's an explanation of its structure and functionality:

Imports:

Several UI components (Account, Footer, Header, Sidebar) are imported from a central components file. These components are likely used to build the page layout.
1. Function Declaration:
The Accountpage component is defined as a functional component.
1. Rendering:
The component returns JSX markup to define its structure.
It includes several UI components:
- Header: Likely displays the top navigation or page title.
- Sidebar: Usually contains navigation links or additional options.
- Account: Presumably displays account-related information or settings for the user.
- Footer: Typically displays the bottom navigation or additional information.
  1. Export:
The Accountpage component is exported as the default export, making it accessible for use in other parts of the application.

Overall, the Accountpage component serves as a page layout that includes a header, sidebar, account information section, and footer. It provides a structured interface for displaying account-related information or settings within the application.

The Note-taking functionality :

As the app is all about taking notes and managing them its is important to dicuss about the notes taking feature , it's the backbone of application and how I have managed to build this notes app using React JS and MockAPIs.

The note taking functions takes notes header, priority ,label ,paragraph and notes color and produces the final notes based on the given input values.

Here is the snapshot of note taking feature:

here is the code snippet:



import { useNoteTakingContext } from "../../Context/IndexAllContext";
import { addNotesintoDbFn } from "../../Services/NoteTakingServices";
import RTEEditor from "../Editor/RTEEditor";
import "./InputNotes.css";
function InputNotes({ toggleModal }) {
  const {
    notesBgColor,
    inputTextTitleValue,
    priorityRadioBoxValue,
    labelInputBoxValue,
    textareaBoxValue,
    noteCreationTime,
    notesTakingFn,
    isOpen,
  } = useNoteTakingContext();
  function submitNotes(e) {
    addNotesintoDbFn(
      e,
      inputTextTitleValue,
      priorityRadioBoxValue,
      labelInputBoxValue,
      textareaBoxValue,
      notesBgColor,
      noteCreationTime,
      notesTakingFn
    );

    notesTakingFn({ type: "INPUTTEXTTITLEVALUE", payload: null });
    notesTakingFn({ type: "PRIORITYRADIOBOXVALUE", payload: null });
    notesTakingFn({ type: "LABELINPUTBOXVALUE", payload: null });
    notesTakingFn({ type: "TEXTAREABOXVALUE", payload: null });
    notesTakingFn({ type: "NOTESBGCOLOR", payload: null });
    toggleModal();
  }

  return (
    <div>
      <div
        className="notes1-container"
        style={{
          backgroundColor: notesBgColor,
        }}
        defaultValue="#FFFF"
      >
        <div className="form-container">
          <form onSubmit={submitNotes}>
            <input
              type="text"
              name="name"
              required
              class="navigation__input"
              placeholder="notes Title....!"
              onChange={(e) =>
                notesTakingFn({
                  type: "INPUTTEXTTITLEVALUE",
                  payload: e.target.value,
                })
              }
            />
            <label className="label-radio-box">
              Priority
              <input
                type="radio"
                name="priority"
                value="top"
                required
                checked={priorityRadioBoxValue === "top"}
                onChange={(e) =>
                  notesTakingFn({
                    type: "PRIORITYRADIOBOXVALUE",
                    payload: e.target.value,
                  })
                }
              />
              Top
              <input
                type="radio"
                name="priority"
                value="medium"
                required
                checked={priorityRadioBoxValue === "medium"}
                onChange={(e) =>
                  notesTakingFn({
                    type: "PRIORITYRADIOBOXVALUE",
                    payload: e.target.value,
                  })
                }
              />
              Medium
              <input
                type="radio"
                name="priority"
                value="low"
                required
                checked={priorityRadioBoxValue === "low"}
                onChange={(e) =>
                  notesTakingFn({
                    type: "PRIORITYRADIOBOXVALUE",
                    payload: e.target.value,
                  })
                }
              />
              Low{" "}
            </label>
            <input
              type="text"
              name="name"
              required
              class="navigation__input"
              placeholder="add labels....!"
              onChange={(e) =>
                notesTakingFn({
                  type: "LABELINPUTBOXVALUE",
                  payload: e.target.value,
                })
              }
            />
            <div className="rte-icons">
              <RTEEditor />
            </div>

            <div className="color-pallete">
              <input type="submit" className="take-notes-btn" />
              <label>
                <input
                  type="color"
                  className="input-color"
                  onChange={(e) =>
                    notesTakingFn({
                      type: "NOTESBGCOLOR",
                      payload: e.target.value,
                    })
                  }
                />
                <span className="material-icons rte-icons2">color_lens </span>
              </label>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default InputNotes;

This code defines a React component named InputNotes, which provides a form for creating and submitting notes. Here’s a detailed explanation of its components and functionality:

Imports:

The useNoteTakingContext hook is imported to access the context for note-taking.
The addNotesintoDbFn function is imported to handle the logic of adding a note to the database.
The RTEEditor component is imported to provide a rich text editor for note content.
CSS styles specific to this component are imported from "InputNotes.css".
1. Function Declaration:
The InputNotes component is defined as a functional component that receives a toggleModal function as a prop.
Inside this component, various state values and functions are extracted from the note-taking context, such as notesBgColor, inputTextTitleValue, priorityRadioBoxValue, labelInputBoxValue, textareaBoxValue, noteCreationTime, notesTakingFn, and isOpen.
1. Form Submission:
The submitNotes function is defined to handle form submission. It takes an event (e) as an argument.
This function calls addNotesintoDbFn with various note attributes and the notesTakingFn to add the note to the database.
After adding the note, it resets the form fields by dispatching actions to the notesTakingFn.
Finally, it calls toggleModal to close the modal containing the form.
1. Rendering:
The component returns JSX markup to define its structure.
The main container has a background color set to notesBgColor.
The form includes:
- An input field for the note title, with an onChange handler to update the inputTextTitleValue.
- A set of radio buttons for selecting the note's priority, each with an onChange handler to update the priorityRadioBoxValue.
- An input field for adding labels, with an onChange handler to update the labelInputBoxValue.
- The RTEEditor component for rich text editing.
- A color picker for selecting the background color of the note, with an onChange handler to update the notesBgColor.
- A submit button to submit the form.
  1. Export:
The InputNotes component is exported as the default export, making it accessible for use in other parts of the application.

Overall, the InputNotes component provides a user interface for creating and submitting new notes, including setting the note title, priority, labels, content, and background color. The form submission logic handles adding the note to a database and resetting the form fields.

Conclusion :

Finally I thoroughly enjoyed building this small note taking app clone as it has given me a deeper understanding of React development and various other tools of the React ecosystem, here is the breakdown of the technologies I have learned :

ReactJS
React Router v6
React Context API and useReducer
React Player
Slate UI - CSS Component Library
MockBee
React Hot Toast

here is the feature list of the application :

Add Notes
Edit Notes
Archive Notes
Delete Notes
Search Notes
Add/update Note labels
Add/update Note priority
Add/update Note color
Filter and sort Notes
Rich Text Editor
Toasts
Authentication

Thanks for Reading it you can see the complete code on github and can browse the project here

If you have anything to share with me or want me to develop some web app I am always open to opportunities you can connect here on Linkedin

Leveraging Salesforce MuleSoft for Seamless Data Integration

PRANKUR PANDEY — Sun, 23 Jun 2024 08:02:30 +0000

Organizations today are overloaded with data from various sources, often residing in disparate systems, creating silos that hinder effective use. This fragmentation leads to inefficiencies, fragmented insights, and missed opportunities.

Picture a sales team unable to access crucial customer information or an operations team facing delays due to unsynced ERP data. These scenarios highlight the critical need for seamless data integration to ensure smooth operations and informed decision-making.

Salesforce MuleSoft addresses these challenges by breaking down data silos and enabling seamless integration across your business ecosystem. MuleSoft’s API-led approach simplifies integration, enhances data flow, and ensures real-time access to information. In this article, you'll discover how MuleSoft can transform your data integration strategy and drive operational efficiency.

Key Features of MuleSoft for Data Integration

MuleSoft offers a wide range of key features that make it a powerful tool for data integration. These features include API-led connectivity, the Anypoint Platform, pre-built connectors, and data transformation and mapping capabilities.

API-led Connectivity is one of MuleSoft's key features, which simplifies integration by allowing organizations to connect applications, data, and devices through APIs. This approach ensures that data is exposed consistently and reusable, making building new applications and services easier.
The Anypoint Platform is another critical feature of MuleSoft. It provides a unified platform for managing, designing, and publishing APIs. With the Anypoint Platform, organizations can create, publish, and update APIs and manage their lifecycle. This platform allows for seamless collaboration and enables organizations to speed up the delivery of new applications and services.
MuleSoft also offers various pre-built connectors for different systems, such as Salesforce, SAP, and Oracle. These connectors provide out-of-the-box integration capabilities, allowing organizations to quickly and easily connect to various systems without needing custom development. Pre-built connectors accelerate integration, ensuring organizations can leverage their existing systems and data sources.
Data transformation and mapping capabilities are essential for data integration, and MuleSoft provides robust tools for performing these tasks. The Anypoint Platform includes a graphical data mapper, allowing users to visually transform and map data between different systems. This eliminates the need for manual coding and simplifies the data integration process. Additionally, MuleSoft supports various data formats and protocols, making it easy to handle diverse data sources.

Benefits of Using MuleSoft for Data Integration

Using MuleSoft for data integration offers many benefits, including improved data flow and accessibility, enhanced customer insights, and increased operational efficiency.

One key benefit of using MuleSoft for data integration is improved data flow and accessibility. MuleSoft provides a unified platform that enables businesses to connect and integrate data from different sources, such as databases, cloud applications, and APIs. This allows for a smooth and efficient data flow between systems, eliminating manual data entry and ensuring that data is consistently up-to-date and accurate.

In addition, using MuleSoft for data integration can increase operational efficiency. By automating data integration processes, businesses can save time and resources that would otherwise be spent on manual data entry and maintenance. This improves productivity and allows employees to focus on more strategic and value-added tasks.

Furthermore, MuleSoft offers a range of tools and features that enhance data security and governance. It provides robust security measures, such as encryption and user authentication, to protect data from unauthorized access or breaches. MuleSoft also offers data governance capabilities, such as data quality checks and auditing, to ensure that data is reliable and compliant with regulatory requirements.

Setting Up MuleSoft for Salesforce Integration

Setting up MuleSoft for Salesforce integration requires a few important steps to ensure a smooth and successful integration between the two systems. This section will guide you through the initial setup process and provide the necessary information to get started.

Preparing Salesforce:

Before setting up MuleSoft, ensuring your Salesforce instance is configured correctly is essential. This includes creating the necessary Salesforce user accounts, defining security settings, and granting access permissions. Additionally, ensure you have identified the specific Salesforce objects and fields you want to integrate with other systems.

Image Source: Salesforce

Installing MuleSoft:

To set up MuleSoft, you must first install the MuleSoft Anypoint Studio, a powerful integrated development environment (IDE) designed for building and deploying Mule applications. The Anypoint Studio can be easily downloaded from the MuleSoft website, and the installation process is straightforward. Once installed, you can proceed to the next step.

Image Source: Mulesoft

Configuring MuleSoft:

After installing Anypoint Studio, you will need to configure MuleSoft to establish the connection with your Salesforce instance. This involves creating a new Mule project and configuring the required connectors and configurations. The Anypoint Studio provides a user-friendly interface that allows you to easily configure Salesforce connectivity. Simply follow the step-by-step instructions provided by MuleSoft's documentation to set up the necessary connections.

Image Source: Mulesoft

Authenticating Salesforce:

Authentication is a crucial step in setting up MuleSoft for Salesforce integration. To establish a secure and reliable connection, you must authenticate the MuleSoft application with Salesforce. MuleSoft provides various authentication mechanisms, such as OAuth, to authenticate with Salesforce. Choose the authentication method that best suits your requirements and follow the authentication process outlined in MuleSoft's documentation.

Image Source: Mulesoft

Testing the Connection:

Once the configuration and authentication steps are completed, it is important to test the connection between MuleSoft and Salesforce. This can be done by running a sample integration flow or performing a simple data retrieval or update operation. Testing the connection ensures that the integration works as expected and helps identify potential issues or errors.

Image Source: Mulesoft

Securing the Integration:

Security is a critical aspect of any integration project. Proper security measures should be implemented to ensure the security of your MuleSoft and Salesforce integration. This includes setting up secure communication protocols, enforcing access controls, encrypting sensitive data, and regularly monitoring and auditing the integration for possible vulnerabilities.

Best Practices for Effective Data Integration

Effective data integration is crucial for businesses that want to leverage the power of data to drive decision-making and operational efficiency. Although integrating different data sources can seem daunting, certain best practices can ensure a successful integration project.

Planning and Strategy: Importance of a clear integration strategy

A key step in achieving effective data integration is a clear integration strategy. This strategy should outline the goals and objectives of the integration project and the steps required to achieve them. Without a clear strategy, organizations may struggle to make sense of the data and fail to achieve the desired outcomes.

A well-defined strategy ensures that all stakeholders are aligned and working towards common goals. It also helps set expectations and identifies potential risks and challenges that may arise during the integration process.

Data Governance: Ensuring data quality and compliance

Data governance plays a crucial role in effective data integration. It involves defining and implementing policies and procedures for managing data, ensuring data quality, and maintaining compliance with regulatory requirements. Organizations risk integrating incomplete or inaccurate data without proper data governance, resulting in flawed insights and erroneous decision-making.

Organizations should establish data standards, validation processes, and quality controls to ensure data quality. This includes data cleansing, profiling, and establishing data ownership and accountability. Additionally, organizations must comply with data privacy and security regulations, such as GDPR or CCPA, to protect sensitive customer information during integration.

Performance Monitoring: Tools and techniques for monitoring integration performance

Monitoring integration performance is vital to ensuring the smooth functioning of integrated systems. It helps identify bottlenecks, performance issues, and potential failures, allowing organizations to take proactive measures and optimize the integration process. Having the right tools and techniques for performance monitoring can significantly enhance the efficiency and effectiveness of data integration.

Integration monitoring tools provide real-time visibility into the integration flows and enable organizations to track data throughput, latency, and error rates. These tools also allow for proactive monitoring, alerting, and troubleshooting of issues. Performance, load, and stress testing should also be conducted to ensure the integrated systems can handle the expected data volumes and workloads without compromising performance.

Security Considerations: Protecting sensitive data during integration

Security should be a top priority when it comes to data integration. Organizations must protect sensitive data during integration to prevent breaches and uphold customer trust. This involves implementing data encryption, access controls, and secure data transfer protocols.

Organizations should also conduct thorough security assessments to identify and mitigate any vulnerabilities in the integration infrastructure. Regular security audits and updates are essential to protect the integrated systems against evolving security threats. Additionally, data masking or anonymization techniques can be employed to minimize the exposure of sensitive data during integration testing or development activities.

Challenges and Solutions

Integrating MuleSoft and Salesforce can present a range of challenges. One of the most common obstacles is the complexity of integrated systems. MuleSoft and Salesforce are highly robust platforms, and bringing them together requires meticulous planning and careful execution. Additionally, the data models used by MuleSoft and Salesforce can differ significantly, creating difficulties in mapping and transforming data between the two systems.

Furthermore, security and access control can be challenging, as ensuring that data is securely transmitted and accessed by the right users is vital in maintaining the integrity and confidentiality of sensitive information.

Overcoming Obstacles

To overcome these challenges, organizations should adopt a structured approach to integration. This includes thoroughly analyzing the integrated systems, identifying potential roadblocks, and developing a comprehensive integration strategy. It is crucial to involve relevant stakeholders from the MuleSoft and Salesforce teams to ensure all requirements are considered and addressed.

Understanding the data models used in both platforms is essential for successful integration. Time should be invested in mapping and transforming data between MuleSoft and Salesforce, ensuring that all necessary fields and data elements are correctly aligned. Depending on the complexity and scale of the integration, this can require data integration tools or custom development.

Security and access control should be prioritized throughout the integration process. This includes implementing secure protocols for data transmission, encrypting sensitive data, and establishing robust user authentication and authorization mechanisms. Regular audits and monitoring should also be performed to identify any potential security gaps and address them promptly

Final Thoughts

In conclusion, MuleSoft has revolutionized the way organizations approach data integration. With its comprehensive and flexible platform, MuleSoft has empowered businesses to connect disparate systems, streamline processes, and gain valuable insights from their data.

MuleSoft can eliminate the need for custom point-to-point integration solutions by providing a unified platform for data integration. This reduces costs and development time and ensures a more efficient and scalable integration approach.

If you're looking for a flexible, scalable, and future-proof data integration solution, look no further than MuleSoft. Explore MuleSoft's platform's possibilities and take your data integration to the next level.

Build a YouTube Clone in React JS: Create Your Own Video Library App from Scratch!

PRANKUR PANDEY — Fri, 05 Apr 2024 04:57:03 +0000

Introduction

YouTube is an amazing platform as it has billions of videos and creators and allows to open their channels and later monetize them to make decent money.
Have you ever thought of building your own YouTube clone, yup I know that's too big to develop and maintain but as a side project you can definitely try it out to test your skills and feel what it is like to develop your small version of youtube with an addition to some more features on top of it.
Today I will be guiding you to develop your version of the small YouTube app with some new features keeping all the important features of YouTube.
I will be using the React JS, Tailwind CSS and Mock API's.

Folder Structure of the Project

I will be using the standard folder structure to separate components and pages as it allows better management of files and data and improves the navigation inside the project.
The Folder structure snippets are here you can see :

Inside the main src directory I have separated the files and folders for everything backend folder is handling the all mock backend stuff, components folder has components that I will be using in the project as React allows me to break down big pages into components and later I can also reuse the components.
Context folder has the useContext React API which is helping us in projects to manage the states the folder has useReducers code.
The pages folder is all about pages where each page of our app is assembling the components.
The services folder has the API calling methods there I am calling the APIs and storing the response.
Utils contain important code and small libraries or something that is not very common.
The rest of the files are related to projects in which the App.js file is important as it is the main file that holds the entire application.

Let's Build

In the journey of building the application first, I will make all the important pages as it will give you an overview of the application like how many pages you will need and which page will host and display what type of data.
If you have a situation where you have to show multiple pages and the count of the pages will increase with time then it would be technically impossible to make so many pages but React has a special library where you can make as many pages as you want concerning some unique URL to do so you will use React Router which allows to make dynamic pages.
This application has :

Homepage
Explore page
Playlist page
Liked video page
Watch later page
History page
Account manager page
Dynamic page to show each video

Homepage

The homepage is the place where we show what is all about the product this application does have a fancy page as it is just a small demo project but I have put the all important information in a simple banner.
The page contains Header, footer and banner components and I will be using the same header and footer across the app.
The homepage looks like this

You can also see the React code for building the homepage

import React from "react";
import {
  Footer,
  Header,
  Hero,
  Sidebar,
} from "../../Components/IndexAllComponents";
import "./Homepage.css";
function Homepage() {
  return (
    <div>
      <Header />
      <Sidebar />
      <Hero />
      <Footer />
    </div>
  );
}
export default Homepage;

How clean the code is,isnt it? That's why I follow standard coding practices and folder structure to improve the overall look of the code so that even a beginner can understand.

Explore page

The explore page has all the videos that I am getting from the backend from the mock API, the page has two sections one section has a sidebar where I kept the individual page path and another section displays the overall video in video cards.
The page looks like this after it gets loaded :

You can also see the React code for building the Explore page

import {
  Chips,
  Footer,
  Header,
  Sidebar,
  Spinner,
  Videocard,
} from "../../Components/IndexAllComponents";
import { useExplorePageContext } from "../../Context/IndexAllContext";
import "./Explorepage.css";
function Explorepage() {
  const { finalData, isLoading } = useExplorePageContext();
  return (
    <div>
      <Header />
      <div className="explorepage-data">
        <Sidebar />
        <Chips />
        <div className="explorepage-videos-style">
          {isLoading ? (
            <Spinner />
          ) : (
            finalData.map((video) => {
              return <Videocard key={video._id} video={video} />;
            })
          )}
        </div>
      </div>
      <Footer />
    </div>
  );
}
export default Explorepage;

This code defines a React component called Explorepage, which is responsible for rendering a page for exploring videos. Let's break down the code:

Imports: The component imports necessary dependencies from external files, including React, custom components (Chips, Footer, Header, Sidebar, Spinner, Videocard), context (useExplorePageContext), and styles (Explorepage.css).
Function Component: The Explorepage function component is defined, which returns JSX to render the explore page.
useExplorePageContext: The useExplorePageContext hook is used to access context related to the explore page, such as finalData (list of videos to display) and isLoading (loading state).
Rendering Explore Page: Inside the returned JSX:
- The Header component is displayed at the top.
- The main content of the explore page is wrapped inside a div with the class explorepage-data.
- The Sidebar component is included to provide navigation options.
- The Chips component is rendered to provide filtering options or categories for videos.
- The video cards are displayed inside a div with the class explorepage-videos-style. If the page is still loading (isLoading is true), a Spinner component is displayed. Otherwise, each video in finalData is mapped to a Videocard component, passing the video data as props.
Footer: Finally, the Footer component is displayed at the bottom of the page.
Export: The Explorepage component is exported as the default export. Overall, this code creates a structured layout for the explore page, including a header, sidebar, video cards, and footer. It dynamically renders videos fetched from the context, showing a spinner while loading. Additionally, it provides a layout that allows for easy navigation and exploration of videos.

Playlist page

The playlist is a special where I add my favourite videos and later I can see and play them you can add multiple playlists and also add multiple videos into it.
The playlist page is the page where I display the data of the playlist which will carry all the videos that will be played.
On the playlist page, you view the playlists and also remove it.
The Playlist page looks like this :

Here is the code snippet :

import { Link, useEffect } from "../../Utils/CustomUtils";
import { usePlaylistContext } from "../../Context/IndexAllContext";
import "./Playlistspage.css";
import { Footer, Header, Sidebar } from "../../Components/IndexAllComponents";
import {
  getPlaylistsFn,
  removePlaylistFn,
} from "../../Services/PlaylistPageServices";
function Playlistspage() {
  const { addToPlaylists, setPlaylistFn } = usePlaylistContext();
  useEffect(() => {
    getPlaylistsFn(setPlaylistFn);
  }, []);
  return (
    <div>
      <Header />
      <div
        className="likes-page-sidebar"
        style={{ display: "flex", marginLeft: "15rem" }}
      >
        <Sidebar />
        <div className="playlist-container">
          {addToPlaylists.length <= 0 ? (
            <h3 className="historypage-title">
              {" "}
              THERE ARE NO PLAYLIST TO DISPLAY{" "}
            </h3>
          ) : (
            addToPlaylists &&
            addToPlaylists.map((playlistData) => (
              <div>
                <div className="playlistdata">
                  <span className="material-icons playlisticon">
                    playlist_play
                  </span>
                  <Link to={`/playlists/${playlistData._id}`}>
                    <div className="playlistpage">
                      Playlist {playlistData.playlistName}
                    </div>
                  </Link>
                </div>
                <span
                  className="material-icons playlistmi"
                  onClick={() =>
                    removePlaylistFn(playlistData._id, setPlaylistFn)
                  }
                >
                  delete
                </span>
              </div>
            ))
          )}
        </div>
      </div>
      <Footer />
    </div>
  );
}
export default Playlistspage;

This code is a React component called Playlistspage, which is responsible for rendering a page displaying playlists. Here's an explanation of the code:

Imports: The component imports necessary dependencies from external files, including React, custom utilities (Link, useEffect), context (usePlaylistContext), styles (Playlistspage.css), and components (Footer, Header, Sidebar).
Function Component: The Playlistspage function component is defined, which returns JSX to render the playlist page.
usePlaylistContext: The usePlaylistContext hook is used to access playlist-related context, such as addToPlaylists (list of playlists) and setPlaylistFn (function to update playlists).
useEffect: The useEffect hook is used to perform side effects in the component. Here, it fetches playlists when the component mounts using getPlaylistsFn and updates the playlist context using setPlaylistFn.
Rendering Playlists: The component renders playlists by mapping through addToPlaylists array. If there are no playlists (addToPlaylists.length <= 0), it displays a message indicating no playlists to display. Otherwise, it maps through each playlist in addToPlaylists, displaying its name and a delete icon (material-icons) to remove the playlist.
Sidebar and Layout: The Sidebar component is included to provide navigation options. The layout is structured with a flexbox, ensuring that the sidebar and playlist container are displayed side by side.
Footer and Return: Finally, the Footer component is included at the bottom of the page, and the JSX for the component is returned for rendering. Overall, this code fetches and displays playlists, allows users to navigate to individual playlists, and provides the option to delete playlists.

Liked video page

The Liked video page is where I added or bookmarked all the videos that I liked and in future, I would like to see that again.
The page looks like this :

Here is the code snippet :

import React, { useEffect } from "react";
import {
  Footer,
  Header,
  Sidebar,
  SmallVideoCards,
} from "../../Components/IndexAllComponents";
import { useLikeContext } from "../../Context/IndexAllContext";
import {
  getLikedVideosFn,
  removeLikedVideosFn,
} from "../../Services/LikesPageServices";
import "./Likespage.css";
function Likespage() {
  const { getLikedVideos, setLikesFn } = useLikeContext();
  useEffect(() => {
    getLikedVideosFn(setLikesFn);
  }, []);
  return (
    <div>
      <Header />
      <div
        className="likes-page-sidebar"
        style={{ display: "flex", marginLeft: "15rem" }}
      >
        <Sidebar />
        <div className="likes-container">
          {getLikedVideos.length <= 0 ? (
            <h3 className="historypage-title">THERE ARE NO LIKED VIDEOS </h3>
          ) : (
            getLikedVideos.map((like) => (
              <div className="likesdata">
                <SmallVideoCards props={like.videoUrl} />
                <span
                  className="material-icons likesmi"
                  onClick={(_id) => removeLikedVideosFn(like._id, setLikesFn)}
                >
                  delete
                </span>
              </div>
            ))
          )}
        </div>
      </div>
      <Footer />
    </div>
  );
}
export default Likespage;

This code defines a React component called Likespage, which is responsible for rendering a page displaying liked videos. Let's break down the code:

Imports: The component imports necessary dependencies from external files, including React, custom components (Footer, Header, Sidebar, SmallVideoCards), context (useLikeContext), and services (getLikedVideosFn, removeLikedVideosFn).
Function Component: The Likespage function component is defined, which returns JSX to render the liked videos page.
useEffect Hook: The useEffect hook is used to perform side effects in the component. In this case, it fetches liked videos using the getLikedVideosFn service function when the component mounts ([] dependency array).
Rendering Liked Videos Page: Inside the returned JSX:
- The Header component is displayed at the top.
- The main content of the liked videos page is wrapped inside a div with the class likes-page-sidebar.
- The Sidebar component is included to provide navigation options.
- The liked videos are displayed inside a div with the class likes-container. If there are no liked videos (getLikedVideos length is <= 0), a message indicating the absence of liked videos is displayed. Otherwise, each liked video in getLikedVideos is mapped to a div containing a SmallVideoCards component to display the video and a delete button represented by a Material Icons icon.
- The Footer component is displayed at the bottom of the page.
Export: The Likespage component is exported as the default export. Overall, this code creates a structured layout for the liked videos page, including a header, sidebar, video cards for liked videos, and footer. It dynamically renders liked videos fetched from the context and provides an option to delete liked videos.

Watch later page

The Watch Later page is also similar to the Liked video page as again here I am bookmarking the videos to watch later If I don't have time to watch the video right now and I would like to see that in future while in liked video page I have watched the video and really liked it.
here is how the page looks :

here is the code :

import { useEffect } from "../../Utils/CustomUtils";
import { useWatchLaterContext } from "../../Context/IndexAllContext";
import "./Watchlaterpage.css";
import {
  Footer,
  Header,
  Sidebar,
  SmallVideoCards,
} from "../../Components/IndexAllComponents";
import {
  getWatchLaterVideosFn,
  removeWatchLaterVideosFn,
} from "../../Services/WatchLaterServices";
function Watchlaterpage() {
  const { getWatchLaterVideos, setWatchLaterFn } = useWatchLaterContext();
  useEffect(() => {
    getWatchLaterVideosFn(setWatchLaterFn);
  }, []);
  return (
    `<div>`
      `<Header />`
      <div
        className="likes-page-sidebar"
        style={{ display: "flex", marginLeft: "15rem" }}
      >
        `<Sidebar />`
        `<div className="watchlater-container">`
          {getWatchLaterVideos.length <= 0 ? (
            `<h3 className="watchlaterpage-title">`
              THERE ARE NO WATCHLATER VIDEOS{" "}
            `</h3>`
          ) : (
            getWatchLaterVideos.map((watch_later) => (
              `<div className="watchlaterdata">`
                `<SmallVideoCards props={watch_later.videoUrl} />`
                <span
                  className="material-icons watchlatermi"
                  onClick={(_id) =>
                    removeWatchLaterVideosFn(watch_later._id, setWatchLaterFn)
                  }
                >
                  delete

              `</div>`
            ))
          )}
        `</div>`
      `</div>`
      `<Footer />`
    `</div>`
  );
}
export default Watchlaterpage;

This code defines a React component called Watchlaterpage, responsible for rendering a page displaying videos saved to watch later. Let's break down the code:

Imports: The component imports necessary dependencies from external files, including useEffect from custom utilities (../../Utils/CustomUtils), useWatchLaterContext from context (../../Context/IndexAllContext), custom components (Footer, Header, Sidebar, SmallVideoCards), and services (getWatchLaterVideosFn, removeWatchLaterVideosFn).
Function Component: The Watchlaterpage function component is defined, which returns JSX to render the watch later videos page.
useEffect Hook: The useEffect hook is used to perform side effects in the component. In this case, it fetches watch later videos using the getWatchLaterVideosFn service function when the component mounts ([] dependency array).
Rendering Watch Later Videos Page: Inside the returned JSX:
- The Header component is displayed at the top.
- The main content of the watch later videos page is wrapped inside a div with the class likes-page-sidebar.
- The Sidebar component is included to provide navigation options.
- The watch later videos are displayed inside a div with the class watchlater-container. If there are no watch later videos (getWatchLaterVideos length is <= 0), a message indicating the absence of watch later videos are displayed. Otherwise, each watch later video in getWatchLaterVideos is mapped to a div containing a SmallVideoCards component to display the video and a delete button represented by a Material Icons icon.
- The Footer component is displayed at the bottom of the page.
Export: The Watchlaterpage component is exported as the default export. Overall, this code creates a structured layout for the Watch Later videos page, including a header, sidebar, video cards for Watch Later videos, and footer. It dynamically renders watch later videos fetched from the context and provides an option to remove them from the watch later list.

History page

History is the past that I have viewed already or seen the same goes for the history page for the videos I have watched or performed any action on such as liking or adding the videos to watch list.
Here is what the history page looks like :

here is the code snippet :

import { useEffect } from "../../Utils/CustomUtils";
import {
  useExplorePageContext,
  useHistoryContext,
} from "../../Context/IndexAllContext";
import "./Historypage.css";
import {
  Footer,
  Header,
  Sidebar,
  SmallVideoCards,
} from "../../Components/IndexAllComponents";
import {
  getHistoryFn,
  removeAllHistoryFn,
  removeVideoFromHistoryFn,
} from "../../Services/HistoryPageServices";
function Historypage() {
  const { getHistory, setHistoryFn } = useHistoryContext();
  const { finalData } = useExplorePageContext();
  useEffect(() => {
    getHistoryFn(setHistoryFn);
  }, [finalData]);
  return (
    <div>
      <Header />
      <div
        className="likes-page-sidebar"
        style={{ display: "flex", marginLeft: "15rem" }}
      >
        <Sidebar />
        <div className="watchlater-container">
          <button
            className="btn btn-danger clearallhistory"
            onClick={() => removeAllHistoryFn(setHistoryFn)}
          >
            clear history
          </button>
          {getHistory.length <= 0 ? (
            <h3 className="historypage-title">
              {" "}
              THE HISTORY IS EMPTY , WATCH SOMETHING TO ADD HERE{" "}
            </h3>
          ) : (
            getHistory.map((history) => (
              <div className="watchlaterdata">
                <SmallVideoCards props={history.videoUrl} />
                <span
                  className="material-icons watchlatermi"
                  onClick={(_id) =>
                    removeVideoFromHistoryFn(history._id, setHistoryFn)
                  }
                >
                  delete
                </span>
              </div>
            ))
          )}
        </div>
      </div>
      <Footer />
    </div>
  );
}
export default Historypage;

This code represents a React component for displaying a user's browsing history, typically related to watched videos. Here's a breakdown of what each part of the code does:

Imports: The component imports necessary dependencies including useEffect from CustomUtils, various context hooks (useExplorePageContext and useHistoryContext) from IndexAllContext, and UI components and services from respective directories.
CSS: The component imports a CSS file named Historypage.css for styling purposes.
Function Component: Historypage is a functional component that renders JSX. It fetches and displays the user's browsing history.
Context Usage: It uses the useHistoryContext hook to access the user's browsing history and a setter function to update it. Additionally, it utilizes the useExplorePageContext hook to access the finalData, which likely contains information about the videos the user has watched.
useEffect Hook: The useEffect hook is used to fetch the user's browsing history when the finalData changes. This ensures that the history is updated whenever the user watches a new video.
Rendering: The component renders a header, a sidebar, and a list of watched videos. If the history is empty, it displays a message prompting the user to watch something to add to their history. Otherwise, it displays the list of watched videos along with a button to clear all history.
Event Handling: Click events are attached to the "clear history" button and the delete icon next to each video. Clicking the "clear history" button triggers the removeAllHistoryFn function to remove all history entries. Clicking the delete icon triggers the removeVideoFromHistoryFn function to remove the corresponding video from the history.
Footer: Finally, the component renders a footer. Overall, this component efficiently manages the user's browsing history, providing options to view, clear, and interact with the history entries. It effectively utilizes React hooks and context for state management and renders a user-friendly interface for the browsing history feature.

Account manager page

The account manager page shows the data related to your account where I am showing how many videos I have liked, how many playlists I have created and how many notes I have taken so far, yes I have integrated one additional feature.
Here is what the page looks like :

the code snippet :

import {
  Accountdetails,
  Footer,
  Header,
  Sidebar,
} from "../../Components/IndexAllComponents";
function Accountpage() {
  return (
    <div>
      <Header />
      <div
        className="account-page-sidebar"
        style={{ display: "flex", marginLeft: "25rem" }}
      >
        <Sidebar />
        <Accountdetails />
      </div>
      <Footer />
    </div>
  );
}
export default Accountpage;

This code represents a React component named Accountpage responsible for rendering the user's account details page. Here's a breakdown of what each part of the code does:

Imports: The component imports necessary UI components (Accountdetails, Footer, Header, Sidebar) from the IndexAllComponents module.
Function Component: Accountpage is a functional component that renders JSX. It composes the account page layout using imported UI components.
Rendering: Within the div element, it renders the following components in order:
- <Header />: Renders the header component, typically containing navigation links or branding elements.
- <Sidebar />: Renders the sidebar component, which likely provides navigation options or secondary functionalities related to the account page.
- <Accountdetails />: Renders the account details component, which presumably displays information such as user profile data, settings, or subscription details.
- <Footer />: Renders the footer component, which often contains links, copyright information, or additional navigation.
Styling: Inline styling is applied to the container div to position the sidebar with a left margin of 25rem. This ensures proper alignment and layout of the sidebar and account details components.
Export: The Accountpage component is exported as the default export, making it accessible for use in other parts of the application. Overall, this component encapsulates the structure and layout of the account page, combining various UI components to provide a cohesive user experience for viewing and managing account details.

Dynamic page to show videos

When you land on the explore page you see all the listed videos from the backend now you want to see the video and also wish to like it or don't have time to watch it right now so you want to add it into watch later,so technically it's not practical to give all these features on explore page therefore having a separate age will give more sense for each video
the dynamic page to show videos comes into the picture and this page is created where you do all the actions and also add the notes if you wish to note down something from the video.
You can take notes, see the notes and also delete it.
here how the page looks like :

the code snippet :

import React from "react";
import {
  Footer,
  Header,
  Sidebar,
  SingleVideo,
} from "../../Components/IndexAllComponents";
import "./SingleVideopage.css";
function SingleVideopage() {
  return (
    <div>
      <Header />
      <div className="sidebar-single-video">
        <Sidebar />
        <SingleVideo />
      </div>
      <Footer />
    </div>
  );
}
export default SingleVideopage;

This code represents a React component named SingleVideopage, which is responsible for rendering a page displaying a single video. Here's a breakdown of the code:

Imports: The component imports necessary UI components (Footer, Header, Sidebar, SingleVideo) from the IndexAllComponents module. These components are likely responsible for rendering the layout, navigation, and content related to the single video page.
Function Component: SingleVideopage is a functional component that renders JSX. It composes the single video page layout using the imported UI components.
Rendering: Within the div element, it renders the following components in order:
- <Header />: Renders the header component, which typically contains navigation links or branding elements.
- <Sidebar />: Renders the sidebar component, which likely provides navigation options or related videos/thumbnails.
- <SingleVideo />: Renders the single video component, which displays the main content of the page, such as the video player and associated metadata.
- <Footer />: Renders the footer component, which often contains links, copyright information, or additional navigation.
Styling: The CSS class sidebar-single-video is applied to the container div to style the layout of the sidebar and single video components. The actual styles are defined in an external CSS file (SingleVideopage.css), which is imported at the top of the file.
Export: The SingleVideopage component is exported as the default export, making it accessible for use in other parts of the application. Overall, this component encapsulates the structure and layout of the single video page, combining various UI components to provide a cohesive user experience for viewing specific video content.

Inside the video card :

import { Link } from "../../Utils/CustomUtils";
import {
  useHistoryContext,
  useSingleVideoContext,
} from "../../Context/IndexAllContext";
import "./Videocard.css";
import { addToHistoryFn } from "../../Services/HistoryPageServices";
function Videocard({ video }) {
  const { id, title, videoUrl, creatorpic } = video;
  const { setHistoryFn } = useHistoryContext();
  const { videoData } = useSingleVideoContext();
  return (
    <div>
      <div className="video__cards">
        <div class="card-wrapper video-card">
          <div>
            <embed class="iframe-video" src={videoUrl} title="video"></embed>
          </div>
          <Link to={`/explore/${_id}`}>
            <div className="video__cards-details">
              <div className="video__cards-image">
                <img src={creator_pic} alt="images" className="" />
              </div>
              <div
                className="video__cards-title"
                onClick={() => addToHistoryFn(videoData, setHistoryFn)}
              >
                <h3>{title} </h3>
              </div>
            </div>
          </Link>
        </div>
      </div>
    </div>
  );
}
export default Videocard;

This code defines a React component called Videocard, which represents a card displaying information about a video. Here's a breakdown of the code:

Imports:
- Link: This component is imported from the CustomUtils module, likely for routing purposes.
- useHistoryContext and useSingleVideoContext: These are custom hooks imported from the IndexAllContext module. They are used to access and manipulate state related to the user's browsing history and the currently selected single video, respectively.
- addToHistoryFn: This function is imported from the HistoryPageServices module. It is likely used to add a video to the user's browsing history.
Function Component:
- The Videocard component is a functional component that accepts a video object as a prop.
- Within the component, destructuring is used to extract specific properties (_id, title, videoUrl, creator_pic) from the video object.
Rendering:
- The component renders JSX to represent a video card.
- It consists of a div with the class video__cards, which contains a card-wrapper (div with the class card-wrapper video-card).
- Inside the card wrapper, an embed element is used to embed the video specified by the videoUrl.
- The video card also includes details such as the creator's profile picture (creator_pic) and the video title (title). These details are wrapped inside a Link component, which likely links to the video's detailed page (/explore/${_id}).
- An onClick event handler is attached to the video__cards-title element. When clicked, it calls the addToHistoryFn function with the videoData and setHistoryFn arguments.
Styling:
- The CSS class video__cards is applied to style the overall layout of the video card.
- Additional styling is applied using external CSS defined in the Videocard.css file.
Export: The Videocard component is exported as the default export, making it available for use in other parts of the application.

The Note-taking functionality :

I believe in development as a real software engineer is the responsibility to handle the application development therefore in this application, I have added a small feature on top of the app this feature allows you to take notes while watching the videos, you can see the notes on the same page where you are watching the videos and also delete it, there's no rich text support for the taking notes will be completely in plain text.
the code snippet:

   import React from "react";
   import {
     useNotesAppContext,
     useSingleVideoContext,
   } from "../../Context/IndexAllContext";
   import "./NoteTaking.css";
   function NoteTaking() {
     const { notesTakingBoxState } = useSingleVideoContext();
     const {
       inputNotesTextValue,
       setinputNotesTextValue,
       saveNotesFn,
       inputNotesData,
       deleteNotesFn,
       editNotesFn,
       buttonState,
     } = useNotesAppContext();
     return (
       <div
         className="notes-container"
         style={{
           display: notesTakingBoxState,
         }}
       >
         <div class="form-data">
           <form onSubmit={saveNotesFn}>
             <input
               type="text"
               className="notes-app"
               value={inputNotesTextValue}
               onChange={(e) => setinputNotesTextValue(e.target.value)}
               required
               placeholder="take notes "
             />
             <input type="submit" class="submit-notes" />
           </form>
           <div>
             <div>
               <table>
                 <tr>
                   <th className="notes-data">Notes</th>
                   <th>
                     <span class="notesmi">Action</span>
                     {/* <span class="material-icons notesmi">edit</span> */}
                   </th>
                 </tr>
                 {inputNotesData.map((text) => (
                   <tr>
                     <td className="notes-data"> {text.inputNotesTextValue} </td>
                     <td>
                       {/* <button className="btns">
                         <span
                           class="material-icons notesmi"
                           onClick={(_id) => editNotesFn(text._id)}
                         >
                           edit
                         </span>
                       </button> */}
                       <span
                         class="material-icons notesmi"
                         onClick={(_id) => deleteNotesFn(text._id)}
                       >
                         delete
                       </span>
                     </td>
                   </tr>
                 ))}
               </table>
             </div>
           </div>
         </div>
       </div>
     );
   }
   export default NoteTaking;

This code defines a React component called NoteTaking, which represents a note-taking feature within a larger application. Let's break down the code:

Imports:
- useNotesAppContext and useSingleVideoContext: These are custom hooks imported from the IndexAllContext module. They are used to access and manipulate states related to note-taking functionality and the context of a single video, respectively.
Function Component:
- The NoteTaking component is a functional component that doesn't receive any props.
- Inside the component, destructuring is used to extract specific values from the useSingleVideoContext and useNotesAppContext hooks.
Rendering:
- The component renders JSX to represent a note-taking interface.
- It consists of a div with the class notes-container, which has its display property determined by the notesTakingBoxState.
- Inside the container, there's a form for inputting notes. The form's submission is handled by the saveNotesFn function.
- Below the form, there's a table displaying the existing notes (inputNotesData). Each note is rendered as a row in the table.
- Each note includes its text in the first column (td) and an action (such as deletion) in the second column.
Event Handling:
- The onChange event of the input field updates the inputNotesTextValue state with the typed note text.
- Clicking the submit button triggers the saveNotesFn function to save the note.
- Clicking the delete icon triggers the deleteNotesFn function to remove the corresponding note.
Styling:
- The component applies to style using the NoteTaking.css file, which likely contains CSS rules for layout and presentation.
Export: The NoteTaking component is exported as the default export, making it available for use in other parts of the application.

Conclusion :

Finally, I thoroughly enjoyed building this small YouTube clone as it has given me a deeper understanding of React development and various other tools of the React ecosystem, here is the breakdown of the technologies I have learned :

ReactJS
React Router v6
React Context API and useReducer
React Player
Slate UI - CSS Component Library
MockBee
React Hot Toast here is the feature list of the application :
Video Listing page
Like/dislike a video
Playlist Management
Watchlater Management
History Management
Filter videos by category
Sort videos by date
Search videos
Authentication
Take/Delete Notes Thanks for Reading it you can see the complete code on github and can browse the project here If you have anything to share with me or want me to develop some web app I am always open to opportunities you can connect here on Linkedin

Build a Full-Stack E-Commerce React App from Scratch: The Ultimate Guide

PRANKUR PANDEY — Fri, 29 Mar 2024 04:42:52 +0000

Introduction :

The increasing demand for user-friendly, feature-rich e-commerce platforms has become viral whether it's Amazon, Walmart, or Shopify everyone is shifting to become a self-hosted e-commerce platform to sell and arrange better goods online without annoying customers to visit physical shops to purchase anything.

My Project :

I am too much tech-friendly as I believe that technology can solve anything so I started learning about it and eventually got into web development I chose React JS to build something to practice my skills while gaining a deep understanding of the core concepts of React JS & its entire ecosystem.

I wanted to build some real-world applications so that recruiters and other people could relate to them easily therefore I developed Agri Store a basic E-commerce platform to utilize the power of React JS.

Project Goals :

The goal was to dig deeper by coding a lot into it I intend to showcase the capabilities of React JS, React Router v6, Context API, MockBee, TailwindCSS, React Hot Toast, and integrate features like product listings, sorting/filtering, authentication, cart/wishlist management, payment processing, and purchase history.

Project Structure and Key Features :

I wanted to industry-level best practices by separating the projects into folders and the folder structure is as follows:

The SRC folder: As you all know React JS has a separate source (src) folder that contains all the logic and UI parts and by combining everything we link everything to the main App JS FILE which serves the index.html file It also the main source file.

The Component Folder: Components are a small amount of UI for the entire page instead of making the same component repetitively if it is being used multiple times we create it once and call it anywhere on any page.

The Context Folder: The context Folder is responsible for managing the states in the entire application it helps to clean the code separately and create the files and folders concerning the feature we are building.

The Pages Folder: Pages are nothing different than other web pages in React JS instead of building the entire pages in one go we break the pages into smaller components.

The Services Folder: The services folder contains all the backend data which can be hosted as a JSON file or it can also be retrieved from an API.

The UTILS Folder: Utils or utility folder generally contains the main or supported libraries code in one file making your code much cleaner and easy to read and understand.

Decoding Page Structure :

My Project contains multiple pages as I have also implanted dynamic routing enabling users to see the product details in separate pages.

I have added the following pages to my work

Landing or Homepage to showcase what I am offering
Product Listing Page to display how many products I have along with their values and a sidebar section to filter out the products based on their price, rating & availability
Dynamic Product Listing page for each product
Cart Page along with the checkout button you can also increase and decrease the quantity of product and remove it as well from the cart
Order & address manager page with the option to add an address and proceed with payment.
Order Confirmation page that your order has been received successfully.
Wishlist page to add products for future reference.
Profile manager page where you can see the order you have purchased, the address you have added, and your profile information under the separate tabs.
Authentication page for user login and signup along with mock login credentials.

Decoding the Entire project :

First I would like to disclose the common components that are being used everywhere in the project I will also add the code snippets along with the explanations

1. Header across the app




import { React, Link, useState } from "../../Utils/CustomUtils";

import {

useCartContext,

useFilterContext,

useWishlistContext,

} from "../../Context/AllContextIndex";

function Header() {

const [isMenuOpen, setIsMenuOpen] = useState(false);

const { cart } = useCartContext();

const { wish } = useWishlistContext();

const { dispatch } = useFilterContext();

const token = window.localStorage.getItem("token");

return (

<div>

<div class=" flex flex-row items-center justify-between w-full p-2 sm:px-4 shadow-xl shadow-xs bg-gray-700 fixed-top top">

<Link to="/">

<div class="ml-8 text-lg text-white hidden md:flex">Car-kit</div>

</Link>

<span class="w-full md:w-1/3 h-10 cursor-pointer border border-gray-300 text-sm rounded-full flex">

<input type="search" onChange={(e) => dispatch({ type: "SEARCHBAR", payload: e.target.value })} placeholder="Search"

class="flex-grow px-4 rounded-l-full rounded-r-full text-sm focus:outline-none"

/>

</span>

<div class="flex text-white text-2xl ">

<div class="flex w-48 justify-between ">

<Link to="/ProductListingPage">

<span class="material-icons "> store </span>

</Link>

<div class="">

<Link to="/WishlistPage">

<span class="material-icons "> favorite</span>

</Link>

<span class="w-4 h-4 rounded-full text-center absolute leading text-xs bg-red-500">

{wish.length}

</span>

</div>

<div class="navbadge">

<Link to="/CartPage">

<span class="material-icons"> shopping_cart </span>

</Link>

<span class="w-4 h-4 rounded-full text-center absolute leading text-xs bg-red-500">

{cart.length}

</span>

</div>

{!token ? (

<Link to="/LoginPage">

<span class="material-icons "> login </span>

</Link>

) : (

<Link to="/Accountpage">

<span class="material-icons "> account_circle </span>

</Link>

)}

</div>

</div>

</div>

</div>

);

}

export { Header }

This code is a React component called Header which likely represents a header section of a website or web application. Let's break down the code step by step:

Imports: The code imports necessary modules and functions from other files. It imports React, Link, and useState from "../../Utils/CustomUtils", and imports custom context hooks useCartContext, useFilterContext, and useWishlistContext from "../../Context/AllContextIndex".

Function Component Header: This is the main React function component named Header.

State Management: It uses the useState hook to manage the state of isMenuOpen, initializing it with false.

Context Usage: It uses the custom context hooks (useCartContext, useFilterContext, useWishlistContext) to get the state values (cart, wish, dispatch) from the respective contexts.

Token Retrieval: It retrieves a token from the localStorage. This token might be used for authentication purposes.

JSX Rendering: It returns JSX elements to render the header section. The header consists of various elements such as links, search bar, icons, etc.

Dynamic Content: It dynamically displays the length of the wishlist and cart by accessing the length of wish and cart arrays respectively.

Conditional Rendering: It conditionally renders a login link or an account link based on the presence of a token.

Event Handling: It attaches an onChange event handler to the search input field, which dispatches an action with the type "SEARCHBAR" and the input value as the payload when the user types in the search bar.

CSS Styling: Inline CSS classes are used to style the elements. Classes like flex, items-center, justify-between, w-full, etc., are applied to structure and style the header section.

Overall, this code represents a header component with navigation links, a search bar, icons for wishlist, cart, and login/account, and dynamic content based on the user's actions.

2. Footer across the app




import React from "../../Utils/CustomUtils";

import "../../Utils/CustomCSSUtils.css";

function Footer() {

return (

<div>

<footer class="text-gray-400 bg-gray-900 body-font fixed bottom-0 w-full">

<div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col ">

<a class="flex title-font font-medium items-center md:justify-start justify-center text-white">

<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-red-500 rounded-full" viewBox="0 0 24 24">

<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>

</svg>

<span class="ml-3 text-xl">CarSale</span>

</a>

<p class="text-sm text-gray-400 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">© 2023 CarSale —

<a href="https://prankurpandeyy.netlify.com" class="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">@prankurpandeyy</a>

</p>

<span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">

<a class="text-gray-400" href="https://fb.com/prankurpandeyy">

<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">

<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>

</svg>

</a>

<a class="ml-3 text-gray-400" href="https://twitter.com/prankurpandeyy">

<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">

<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>

</svg>

</a>

<a class="ml-3 text-gray-400" href="https://instagram.com/prankurpandeyy">

<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">

<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>

<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>

</svg>

</a>

<a class="ml-3 text-gray-400" href="https://linkedin.com/in/prankurpandeyy">

<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">

<path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>

<circle cx="4" cy="4" r="2" stroke="none"></circle>

</svg>

</a>

</span>

</div>

</footer>

</div>

);

}

export { Footer };

This code defines a React component called Footer, which likely represents the footer section of a website or web application. Let's break down the code:

Imports:

import React from "../../Utils/CustomUtils";: Imports the React module from "../../Utils/CustomUtils". This import is not used directly in the component but is typically required in every React component file.
import "../../Utils/CustomCSSUtils.css";: Imports a CSS file named "CustomCSSUtils.css" from the "../../Utils" directory. This CSS file is likely used to style elements within the footer component.

Function Component Footer:

This is the main React function component named Footer.
It returns JSX elements to render the footer section.

JSX Rendering:

The footer consists of various elements such as a logo, text, links to social media profiles, etc.
The logo is an SVG image wrapped in an anchor (<a>) tag.
Text content includes the name of the website and copyright information.
Social media links are represented by SVG icons wrapped in anchor tags (<a>).

CSS Classes:

Inline CSS classes are used to style the elements. Classes like text-gray-400, bg-gray-900, px-5, py-8, etc., are applied to structure and style the footer section.
Additionally, classes from the imported CSS file (CustomCSSUtils.css) may also be applied to style certain elements.

Export:

export { Footer };: This line exports the Footer component, making it available for import in other files. By exporting the Footer component, you make it accessible for use in other parts of your application.

Overall, this code represents a footer component with branding, text content, and links to social media profiles, styled using CSS classes.

3. Product Cards from the product listing page to the wishlist & checkout page :




import { React, Link, useNavigate } from "../../Utils/CustomUtils";

import {

useWishlistContext,

useCartContext,

useProductContext,

} from "../../Context/AllContextIndex";

import { addToCart, removeFromCart } from "../../Services/CartServices";

import { addToWishlist, deleteWishList } from "../../Services/WishlistServices";

import "./ProductCard.css";

function ProductCard({ productCardData }) {

const { _id, image, title, price, rating, inStock } = productCardData;

const { wish } = useWishlistContext();

const { dispatch } = useProductContext();

const { cart } = useCartContext();

const navigate = useNavigate();

const token = localStorage.getItem("token");

return (

<div>

<div class="w-full h-full flex justify-center items-center">

<div class="relative p-4 flex justify-center rounded-xl cursor-pointer">

<div class="top-0 left-0 mt-3 px-2 rounded-lg absolute z-30 bg-green-500 text-gray-100 text-xs md:text-sm font-medium md:block">

{inStock === true ? `in Stock` : `out of stock`}

</div>

<div class="top-0 left-0 h-2 md:h-3 mt-5 px-2 absolute z-20 bg-green-500"></div>

<div class="top-0 left-0 h-2 md:h-3 mt-6 pl-5 rounded-3xl absolute z-0 bg-green-600"></div>

<div class="w-52 pb-2 bg-white rounded-xl z-10">

<div class="relative">

<img src={image} class="max-h-60 object-cover rounded-t-xl" alt=""/>

</div>

<div class="px-2 py-1">

<Link to={`/Productdetails/${_id}`}>

<div class="text-sm md:text-base font-bold pr-2">{title}</div>

</Link>

<div class="flex py-2">

<div class="bg-gray-200 p-1 mr-2 rounded-full text-xs font-medium text-gray-900"> ${price}k</div>

<div class="flex justify-between item-center">

<div class="flex items-center">

<svg xmlns="http://www.w3.org/2000/svg" class="h-3 md:h-5 md:w-5 text-yellow-500" viewBox="0 0 20 20" fill="currentColor">

<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />

</svg>

<p class="text-gray-600 font-bold text-xs md:text-sm ml-1">

{rating}

<span class="text-gray-500 font-normal">

(76 rewiews)

</span>

</p>

</div>

</div>

</div>

<div className="flex flex-col justify-center items-center p-4">

{cart.some((prod) => prod._id === productCardData._id) ? (

<button class="p-1 flex mb-2 justify-center items-center bg-red-600 hover:bg-red-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg " onClick={(_id) =>

removeFromCart(productCardData._id, dispatch)}>CART-

<span class="material-icons">remove_shopping_cart </span>

</button>

) : (

<button class="p-1 flex mb-2 justify-center items-center bg-gray-700 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg "

onClick={() => addToCart(productCardData, dispatch)} >CART+

<span class="material-icons ">shopping_cart</span>

</button>

)}

{wish.some(

(wishlist) => wishlist._id === productCardData._id

) ? (

<button class="p-1 flex justify-center items-center bg-red-600 hover:bg-red-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg" onClick={(_id) => deleteWishList(productCardData._id, dispatch)}>WISHLIST- <span class="material-icons">favorite </span> </button>

) : (

<button

class="p-1 flex justify-center items-center bg-gray-700 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg " onClick={() => addToWishlist(productCardData, dispatch)}>

WISHLIST+

<span class="material-icons">favorite_border </span>

</button>

)}

</div>

</div>

</div>

</div>

</div>

</div>

);}

export default ProductCard;

This code defines a React component called ProductCard, which is likely used to display individual product cards on a website or web application. Let's break down the code:

Imports:

import { React, Link, useNavigate } from "../../Utils/CustomUtils";: Imports React, Link, and useNavigate from "../../Utils/CustomUtils". These are likely custom utility functions or modules used in the project.
import { useWishlistContext, useCartContext, useProductContext } from "../../Context/AllContextIndex";: Imports custom context hooks useWishlistContext, useCartContext, and useProductContext from "../../Context/AllContextIndex".
import { addToCart, removeFromCart } from "../../Services/CartServices";: Imports functions addToCart and removeFromCart from "../../Services/CartServices". These functions likely handle adding and removing items from the cart.
import { addToWishlist, deleteWishList } from "../../Services/WishlistServices";: Imports functions addToWishlist and deleteWishList from "../../Services/WishlistServices". These functions likely handle adding items to the wishlist and deleting items from it.
import "./ProductCard.css";: Imports a CSS file named "ProductCard.css".

Function Component ProductCard:

This is the main React function component named ProductCard.
It receives props, specifically productCardData, which likely contains information about the product to be displayed in the card.

Destructuring Props:

The productCardData prop is destructured to extract relevant data such as _id, image, title, price, rating, and inStock.

Context Usage:

It uses custom context hooks to access the cart (cart), wishlist (wish), and product (dispatch) contexts.

State and Navigate:

It uses the useNavigate hook to obtain a navigation function (navigate) for programmatic navigation.
It retrieves a token from the local storage.

JSX Rendering:

It returns JSX elements to render the product card.
The card includes product details such as image, title, price, and rating.
It displays whether the product is in stock or out of stock.
It provides buttons for adding/removing the product from the cart and wishlist based on their respective states.
Each button triggers a specific action (e.g., adding to cart, removing from wishlist) via the provided service functions.

CSS Styling:

It applies CSS classes and styles defined in the "ProductCard.css" file to style the elements of the product card.

Export:

export default ProductCard;: This line exports the ProductCard component as the default export, making it available for import in other files. By exporting it as the default export, you can import and use the ProductCard component without using curly braces in other files.

Overall, this code represents a reusable component (ProductCard) used to display product information and provide functionality for adding/removing products from the cart and wishlist. It follows best practices by separating concerns, utilizing custom contexts and service functions, and applying CSS for styling.

4. Inputs at authentication pages as well as in the address manager




import { React, Link, useNavigate, useEffect, useState } from "../../Utils/CustomUtils";

import "../../Utils/CustomCSSUtils.css";

import { useLoginContext } from "../../Context/AllContextIndex";

import { loginHandler } from "../../Services/AuthServices";

function LoginInputs() {

const { dispatch, email, password, name } = useLoginContext();

const navigate = useNavigate();

function submitLoginData() {

loginHandler(email, password, dispatch);

navigate("/ProductListingPage");

}

const [error, setError] = useState("");

const [isDisabled, setIsDisabled] = useState(true);

useEffect(() => {

if (email.length > 0 && password.length > 0) {

setError("");

setIsDisabled(false);

} else {

setError("All fields must be filled.");

setIsDisabled(true);

}

}, [email, password]);

function setGuestLoginData(e) {

e.preventDefault();

const email = "6prankur@gmail.com";

const password = "12345678";

const name = `Guest`;

dispatch({ type: "EMAIL", payload: email });

dispatch({ type: "PASSWORD", payload: password });

dispatch({ type: "NAME", payload: name });

}

return (

<div>

<section class="text-gray-400 bg-gray-900 body-font">

<div class="container px-5 py-24 mx-auto flex flex-wrap items-center">

<div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">

<h1 class="title-font font-medium text-3xl text-white">Slow-carb next level shoindxgoitch ethical authentic, poko scenester</h1>

<p class="leading-relaxed mt-4">Poke slow-carb mixtape knausgaard, typewriter street art gentrify hammock starladder roathse. Craies vegan tousled etsy austin.</p>

</div>

<div class="lg:w-2/6 md:w-1/2 bg-gray-800 bg-opacity-50 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">

<h2 class="text-white text-lg font-medium title-font mb-5">Log In</h2>

<div>

<form onSubmit={submitLoginData}>

<div class="relative mb-4">

<label for="full-name" class="leading-7 text-sm text-gray-400">Email</label>

<input id="email" type="email" value={email} name="email"

onChange={(e) => dispatch({ type: "EMAIL", payload: e.target.value })}

class="w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-red-900 rounded border border-gray-600 focus:border-red-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"

placeholder="Enter your email"

/>

</div>

<div class="relative mb-4">

<label for="email" class="leading-7 text-sm text-gray-400">Password</label>

<input id="password" type="password" name="password" value={password} placeholder="enter your password" onChange={(e) => dispatch({ type: "PASSWORD", payload: e.target.value })}

class="w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-red-900 rounded border border-gray-600 focus:border-red-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"

/>

</div>

<div className="flex flex-col">

<input type='submit' class="text-white bg-red-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 rounded text-lg cursor-pointer" />

<button class="text-white bg-blue-500 border-0 py-2 px-8 focus:outline-none hover:bg-blue-600 rounded text-lg mt-2" onClick={setGuestLoginData}>Guest Login</button>

</div>

</form>

</div>

<p class="text-xs mt-3">Literally you probably haven't heard of them jean shorts.

<Link to="/SignupPage" class="text-xs ml-2 text-blue-500 font-semibold">

<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">SignUp</a>

</Link>

</p>

</div>

</div>

</section>

</div>

);}

export default LoginInputs;

This code defines a React component named LoginInputs, which likely represents a form for user login functionality. Let's break down the code:

Imports:

import { React, Link, useNavigate, useEffect, useState } from "../../Utils/CustomUtils";: Imports React, Link, useNavigate, useEffect, and useState from "../../Utils/CustomUtils". These are likely custom utility functions or modules used in the project.
import "../../Utils/CustomCSSUtils.css";: Imports a CSS file named "CustomCSSUtils.css", presumably for styling the login form.
import { useLoginContext } from "../../Context/AllContextIndex";: Imports a custom context hook useLoginContext from "../../Context/AllContextIndex".
import { loginHandler } from "../../Services/AuthServices";: Imports a function loginHandler from "../../Services/AuthServices", which likely handles the authentication process.

Function Component LoginInputs:

This is the main React function component named LoginInputs.
It doesn't receive any props directly.

Context Usage:

It uses the custom context hook useLoginContext to access login-related state variables such as email, password, and dispatch.

State Management:

It initializes local state variables error and isDisabled using the useState hook.
These states are used to manage error messages and to disable/enable the submit button based on form validation.

Event Handling:

It defines event handlers for submitting login data and setting guest login data.
submitLoginData() is called when the login form is submitted. It calls the loginHandler function and navigates to the product listing page upon successful login.
setGuestLoginData() is called when the "Guest Login" button is clicked. It sets predefined guest login data in the login form.

Effect Hook:

It uses the useEffect hook to perform form validation whenever the email or password state variables change.
If both fields are filled, it clears any existing errors and enables the submit button. Otherwise, it sets an error message and disables the submit button.

JSX Rendering:

It returns JSX elements to render the login form.
The form includes input fields for email and password, along with a submit button and a "Guest Login" button.
It also includes a link to the signup page.

CSS Styling:

It applies CSS classes and styles defined in the "CustomCSSUtils.css" file to style the elements of the login form.

Export:

export default LoginInputs;: This line exports the LoginInputs component as the default export, making it available for import in other files.

Overall, this code represents a reusable component (LoginInputs) used to display a login form, handle user input, perform form validation, and interact with the authentication service. It follows best practices by separating concerns, utilizing custom contexts and services, and applying CSS for styling.

API's :

Now it is time to build pages and integrate the Data APIs before we start building the pages it is the perfect time to understand the APIs & their integration part and how we are using them in our project.

What is an API:

API stands for Application programming interface now let's break all these one by one

Application - In Information Technology an application is an online/offline tool made to serve a specific purpose to solve problems which includes business logic and is responsible for recording and growing the records online these records are recorded in the database through the frontend and the mechanism which helps to do so is called backend.

Programming - It is the technological process of telling a computer which tasks to perform to solve problems and while communicating with computers we use some languages these languages are programming languages such as C, C++ and my favorite JavaScript.

Interface - Consider the interface as a client between your backend data and database without exposing the business logic.

Now the API theory part is done it is time to show some real magic

This is a sample code of all the products that I am getting from the API call from Mockbee




import { React, toast, axios } from "../Utils/CustomUtils";



export async function getProdcutsData(dispatch) {

dispatch({ type: "LOADINGSPINNER", payload: true });

try {

await axios({

method: "GET",

url: `/api/products`,

}).then((response) =>

dispatch({ type: "APIPRODUCTDATA", payload: response.data.products })

);



dispatch({ type: "LOADINGSPINNER", payload: false });

} catch (erorr) {

toast.error(`Server is encountering some issues:`, erorr);

console.log(`Server is encountering some issues:`, erorr);

}

}

This code is an asynchronous function named getProdcutsData used to fetch product data from an API endpoint. Let's break down the code:

Imports: It imports necessary modules React, toast, and axios from the "../Utils/CustomUtils" module.
Function Definition:

async function getProdcutsData(dispatch): It defines an asynchronous function named getProdcutsData that takes a dispatch function as a parameter.

Dispatch Action:

dispatch({ type: "LOADINGSPINNER", payload: true }): It dispatches an action of type "LOADINGSPINNER" with the payload true to indicate that the loading spinner should be shown.

API Request:

await axios({ method: "GET", url: "/api/products" }): It makes a GET request to the "/api/products" endpoint using Axios and waits for the response.

Handling Response:

.then((response) => dispatch({ type: "APIPRODUCTDATA", payload: response.data.products })): Once the response is received, it extracts the products data from the response and dispatches an action of type "APIPRODUCTDATA" with the payload containing the products data.

Dispatch Action (Loading Complete):

dispatch({ type: "LOADINGSPINNER", payload: false }): After receiving the product data or encountering an error, it dispatches an action to stop the loading spinner by setting the payload to false.

Error Handling:

catch (erorr): If any error occurs during the API request, it catches the error.
toast.error(Server is encountering some issues:, erorr): It shows an error toast notification indicating that the server encountered some issues.
console.log(Server is encountering some issues:, erorr): It logs the error to the console for debugging purposes.

In summary, this code fetches product data from an API endpoint, dispatches actions to manage loading state, and handles errors appropriately using toast notifications and console logging.

All the APIs are integrated in a similar way as Frontend developer its the very crucial and most important part of your job to be very well versed with API integration.

Before the integration you will have to check and call it once the API is called you will get the response in your console first and after that you will have to tweak the response to display it on Screen, it is not that easy as I said earlier it is very crucial.

In this project, I have used 20+ API calls and each call is responsible for doing different tasks.

Developing Pages

Developing pages is the next task right after developing components here things go hard as this is the area where you will have to do two things in one go first is integrating API data and second is managing components.

This project has eight pages in the following order :

Homepage
Product listing page
Single Product view page
Cart Manager page
Wishlist page
Checkout page
Order success page
Profile manager page

Homepage

The Homepage is the main page of any application which describes what the application is all about, my homepage has the following structure here is the code




import React from "react";

import {

Footer,

Header,

Hero,

FeaturedBrands,

Spinner,

} from "../../Components/AllComponentIndex";

import { useProductDataContext } from "../../Context/ProductListingPageContext";

function Homepage() {

const { isLoading } = useProductDataContext();

return (

<div>

<Header />

{isLoading ? (

<Spinner />

) : (

<div className="mt-12">

<Hero />

<FeaturedBrands />

</div>

)}

<Footer />

</div>

);

}

export default Homepage;

This code defines a React functional component named Homepage. Let's break down the code:

Imports:

React: Importing the React library to define React components.
Footer, Header, Hero, FeaturedBrands, Spinner: Importing various components from "../../Components/AllComponentIndex" to be used in the Homepage component.
useProductDataContext: Importing the useProductDataContext hook from "../../Context/ProductListingPageContext" to access data related to the product listing page.

Function Definition:

function Homepage() { ... }: Defines a functional component named Homepage.

Component Logic:

const { isLoading } = useProductDataContext();: Destructures the isLoading state from the useProductDataContext hook. This state indicates whether the data is loading or not.

Component JSX:

<div>: Opens a container div for the component.
<Header />: Renders the Header component.
{isLoading ? (<Spinner />) : ( <div className="mt-12"> <Hero /> <FeaturedBrands /> </div> )}:
Checks if isLoading is true.
If isLoading is true, render the Spinner component to indicate that data is loading.
If isLoading is false, renders the Hero and FeaturedBrands components wrapped in a div with className="mt-12".
<Footer />: Renders the Footer component.
</div>: Closes the container div for the component.

Export:

export default Homepage;: Exports the Homepage component as the default export.

In summary, the Homepage component renders a header, a spinner while the data is loading, and a hero section along with featured brands when the data has finished loading. It utilizes context to manage the loading state and components from the specified index file.

The final output look is here :

Product listing page

The Product listing page is responsible for listing all the products in grid view along with the sidebar containing different types of filters to change and find out the product with respect to their stock, price & order. Here is the code




import { React, toast, useNavigate } from "../../Utils/CustomUtils";

import {

useCatagoriesFilterContext,

useProductDataContext,

} from "../../Context/AllContextIndex";

import {

Footer,

Header,

Spinner,

ProductCard,

Sidebar,

} from "../../Components/AllComponentIndex";

import "./ProductlistingPage.css";

function ProductlistingPage() {

const { isLoading } = useProductDataContext();

const { searchbarData } = useCatagoriesFilterContext();

return (

<div className="bg-gray-700 h-screen">

<Header />

<div className="flex justify-start items-start">

<Sidebar />

<div className="flex flex-wrap ml-64 mt-24 mb-8 items-center justify-center">

{isLoading ? (

<Spinner />

) : (

searchbarData.map((productCardData) => {

return (

<ProductCard

productCardData={productCardData}

key={productCardData._id}

/>

);

})

)}

</div>

</div>
</div>

);

}

export default ProductlistingPage;

This code defines a React functional component named ProductlistingPage. Let's break down the code:

Imports:

React, toast, useNavigate: Importing React library, toast, and useNavigate hook from "../../Utils/CustomUtils".
useCatagoriesFilterContext, useProductDataContext: Importing context hooks from "../../Context/AllContextIndex".
Footer, Header, Spinner, ProductCard, Sidebar: Importing various components from "../../Components/AllComponentIndex" to be used in the ProductlistingPage component.

Function Definition:

function ProductlistingPage() { ... }: Defines a functional component named ProductlistingPage.

Component Logic:

const { isLoading } = useProductDataContext();: Destructures the isLoading state from the useProductDataContext hook. This state indicates whether the data is loading or not.
const { searchbarData } = useCatagoriesFilterContext();: Destructures the searchbarData from the useCatagoriesFilterContext hook. This data represents the filtered products based on categories.

Component JSX:

<div className="bg-gray-700 h-screen">: Opens a container div with a grey background that covers the entire height of the screen.
<Header />: Renders the Header component.
<div className="flex justify-start items-start">: Opens a div with flex layout to arrange items horizontally, starting from the left.
<Sidebar />: Renders the Sidebar component.
<div className="flex flex-wrap ml-64 mt-24 mb-8 items-center justify-center">: Opens a div with flex layout, wrapping its contents, and applying margin and alignment styles.
{isLoading ? (<Spinner />) : ( searchbarData.map((productCardData) => { ... }))}: Renders the Spinner component if isLoading is true. Otherwise, it maps over the searchbarData array and renders a ProductCard component for each item.
</div>: Closes the div with flex layout.
</div>: Closes the outer container div.

Export:

export default ProductlistingPage;: Exports the ProductlistingPage component as the default export.

In summary, the ProductlistingPage component renders a header, a sidebar, and a list of product cards. The product cards are dynamically rendered based on the data fetched from the context, and a spinner is shown while the data is loading.

The Final Output is here :

Single Product View Page

The Single Product view is the best example of dynamic routing which is made possible due to React Router it allows to enable dynamic routing resulting in creating a single page for each product along with its details.

Here is the sample code :




import React from "react";

import {Footer,Header,SingleProductCard} from "../../Components/AllComponentIndex";

function SingleProductPage() {

return (

<div>

<Header />

<SingleProductCard />

<Footer />

</div>

);

}

export default SingleProductPage;

This code defines a React functional component named SingleProductPage. Let's break down the code:

Imports:

React: Importing React library to define and use React components.
Footer, Header, SingleProductCard: Importing components from "../../Components/AllComponentIndex" to be used in the SingleProductPage component.

Function Definition:

function SingleProductPage() { ... }: Defines a functional component named SingleProductPage.

Component JSX:

<div>: Opens a container div.
<Header />: Renders the Header component.
<SingleProductCard />: Renders the SingleProductCard component.
<Footer />: Renders the Footer component.
</div>: Closes the container div.

Export:

export default SingleProductPage;: Exports the SingleProductPage component as the default export.

In summary, the SingleProductPage component renders a header, a single product card, and a footer. It serves as a page for displaying details of a single product.

Let's dig deeper into what's inside the <SingleProductCard />




import {React,useEffect,useState,axios,toast,useParams} from "../../Utils/CustomUtils";

import {useWishlistContext,useCartContext,useProductContext} from "../../Context/AllContextIndex";

import { Rating } from "../../Components/AllComponentIndex";

import "./SingleProductCard.css";

import { addToCart, removeFromCart } from "../../Services/CartServices";

import { addToWishlist, deleteWishList } from "../../Services/WishlistServices";

function SingleProductCard() {

const { wish } = useWishlistContext();

const { dispatch } = useProductContext();

const { cart } = useCartContext();

const [singleProduct, setSingleProduct] = useState([]);

const {_id,inStock,manufacturedBy,image,title,rating,price,description,categoryName,} = singleProduct;

const productId = useParams();

 // function to get the product data from the product id

function getProductById(productId) {

axios.get(`/api/products/${productId}`).then((res) => {

setSingleProduct(res.data.product);

}).catch((err) => {console.log(" err", err);

});

}

useEffect(() => {

toast.success(" Fetching single card data.");

getProductById(productId.id);

}, [productId]);


return (

<div>

<section class="text-gray-600 body-font overflow-hidden">

<div class="container px-5 py-24 mx-auto">

<div class="lg:w-4/5 mx-auto flex flex-wrap">

<img alt="ecommerce" class="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"

src={image && image}

/>

<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">

<h1 class="text-gray-900 text-3xl title-font font-medium mb-1">

{title && title}

</h1>

<div class="flex mb-4">

<span class="flex items-center">

<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-indigo-500" viewBox="0 0 24 24">

<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>

</svg>

<svg

fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-indigo-500" viewBox="0 0 24 24" >

<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>

</svg>

<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-indigo-500" viewBox="0 0 24 24">

<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>

</svg>

<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-indigo-500" viewBox="0 0 24 24">

<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>

</svg>

<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 text-indigo-500" viewBox="0 0 24 24">

<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>

</svg>

<span class="text-gray-600 ml-3">4 Reviews</span>

</span>

</div>

<p class="leading-relaxed">{description && description}</p>

<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">

<div class="flex ml-6 items-center">

<div class="relative">

<span class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">

<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">

<path d="M6 9l6 6 6-6"></path>

</svg>

</span>

</div>

</div>

</div>

<div class="flex">

<span class="title-font font-medium text-2xl text-gray-900">

${price && price}

</span>

{cart.some((prod) => prod._id === _id) ? (

<button class="flex ml-auto text-white bg-red-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded" onClick={(_id) => removeFromCart(_id, dispatch)}>

{" "}

REMOVE FROM CART

<span class="material-icons buttonmi">

remove_shopping_cart{" "}

</span>

</button>

) : (

<button

class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded" onClick={() => addToCart(singleProduct, dispatch)}>

ADD TO CART <span class="material-icons buttonmi"> shopping_cart</span>

</button>

)}

{wish.some((wishlist) => wishlist._id === _id) ? (

<button

class="rounded-full w-10 h-10 bg-red-500 p-0 border-0 inline-flex items-center justify-center text-white ml-4"

onClick={(_id) => deleteWishList(_id, dispatch)}

>

<span class="material-icons buttonmi">

favorite_border{" "}

</span>

</button>

) : (

<button

onClick={() => addToWishlist(singleProduct, dispatch)}

class="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4"

>

<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24" >

<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>

</svg>

</button>

)}

</div>

</div>

</div>

</div>

</section>

</div>

);

}

export default SingleProductCard;

Here is the complete explanation of the code

This code defines a React functional component named SingleProductCard. Let's break down the code:

Imports:

React: Importing React library to define and use React components.
useEffect, useState, axios, toast, useParams: Importing hooks and libraries from "../../Utils/CustomUtils" for managing component state, making HTTP requests, displaying notifications, and accessing route parameters.
useWishlistContext, useCartContext, useProductContext: Importing custom hooks from "../../Context/AllContextIndex" for accessing context data related to wishlist, cart, and product.
Rating: Importing the Rating component from "../../Components/AllComponentIndex".

Function Definition:

function SingleProductCard() { ... }: Defines a functional component named SingleProductCard.

Component State:

const [singleProduct, setSingleProduct] = useState([]);: Declares state variable singleProduct and its setter function using the useState hook. It initializes singleProduct with an empty array.

Route Parameters:

const productId = useParams();: Retrieves route parameters using the useParams hook.

Function to Fetch Product Data:

getProductById(productId): Defines a function getProductById to fetch product data based on the provided product ID using Axios.

Effect Hook:

useEffect(() => { ... }, [productId]);: Executes the effect function whenever the productId changes. It fetches product data based on the productId using the getProductById function.

Component JSX:

Renders the product details including title, image, rating, price, description, and buttons for adding/removing from cart and wishlist.

Export:

export default SingleProductCard;: Exports the SingleProductCard component as the default export.

In summary, the SingleProductCard component fetches and displays details of a single product based on the product ID obtained from the route parameters. It also provides options for adding/removing the product from the cart and wishlist.

The screen output is here :

Cart Manager page

The cart manager in any e-commerce app is important as it helps users to completely manage the quantity and place the order for the product.

In this application, you can increase and decrease the quantity,remove the product from the cart, add the product to the wishlist and place the order.

Here is the sample code




import { Link, useEffect } from "../../Utils/CustomUtils";

import {

Header,

Footer,

TotalPrice,

Spinner,

} from "../../Components/AllComponentIndex";

import {

useCartContext,

useProductDataContext,

useWishlistContext,

} from "../../Context/AllContextIndex";

import { removeFromCart, updateQty } from "../../Services/CartServices";

import { addToWishlist, deleteWishList } from "../../Services/WishlistServices";

function CartPage() {

const { dispatch, wish } = useWishlistContext();

const { isLoading } = useProductDataContext();

const { cart, state, totalprice } = useCartContext();

useEffect(() => {

dispatch({

type: "TOTALPRICE",

payload: cart.reduce(

(acc, item) => acc + Number(item.qty) * Number(item.price),

0

),

});

}, [cart]);

return (

<>

<Header cart={cart} />

<section class=" bg-gray-100 py-12 sm:py-16 lg:py-20 mb-20">

<div class="mx-auto px-4 sm:px-6 lg:px-8">

<div class="flex items-center justify-center">

</div>

<div class="mx-auto mt-20 mb-8 max-w-2xl md:mt-12">
<div class="bg-white shadow">

<div class="px-4 py-6 sm:px-8 sm:py-10">

<div class="flow-root">

<ul class="-my-8">

{cart.map(cartdata => {

return (

<li class="flex flex-col space-y-3 py-6 text-left sm:flex-row sm:space-x-5 sm:space-y-0">

<div class="shrink-0">

<img class="h-24 w-24 max-w-full rounded-lg object-cover" src={cartdata.image} alt="" />

</div>
<div class="relative flex flex-1 flex-col justify-between">

<div class="sm:col-gap-5 sm:grid sm:grid-cols-2">

<div class="pr-8 sm:pr-5">

<p class="text-base font-semibold text-gray-900">{cartdata.title}</p>

<span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">

{wish.some(

(wishlist) => wishlist._id === cartdata._id

) ? (

<button data-tooltip-target="tooltip-default"

onClick={(_id) =>

deleteWishList(cartdata._id, dispatch)

}

>

<span class="material-icons">

heart_broken

</span>

</button>

) : (

<button

onClick={() => addToWishlist(cartdata, dispatch)}

>

<span class="material-icons">

{" "}

favorite_border{" "}

</span>

</button>

)}

</span>

<span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">

<button

onClick={(_id) =>

removeFromCart(cartdata._id, dispatch)

}

>

<span class="material-icons">delete</span>

</button>

</span>

</div>

<div class="mt-4 flex items-end justify-between sm:mt-0 sm:items-start sm:justify-end">

<p class="shrink-0 w-20 text-base font-semibold text-gray-900 sm:order-2 sm:ml-8 sm:text-right">{cartdata.price}</p>

<div class="sm:order-1">

<div class="mx-auto flex h-8 items-stretch text-gray-600">

<button class="flex items-center justify-center rounded-l-md bg-gray-200 px-4 transition hover:bg-black hover:text-white" onClick={() =>

updateQty("decrement", cartdata._id, dispatch)

}>-</button>

<div class="flex w-full items-center justify-center bg-gray-100 px-4 text-xs uppercase transition">{cartdata.qty}</div>

<button class="flex items-center justify-center rounded-r-md bg-gray-200 px-4 transition hover:bg-black hover:text-white" onClick={() =>

updateQty("increment", cartdata._id, dispatch)

}>+</button>

</div>

</div>

</div>

</div>

</div>

</li>)

})

}

</ul>

</div>
<div class="mt-6 border-t border-b py-2">

<div class="flex items-center justify-between">

<p class="text-sm text-gray-400">Subtotal</p>

<p class="text-lg font-semibold text-gray-900">{totalprice}</p>

</div>

</div>

<div class="mt-6 flex items-center justify-between">

<p class="text-sm font-medium text-gray-900">Total</p>

<p class="text-2xl font-semibold text-gray-900"><span class="text-xs font-normal text-gray-400">₹</span> {totalprice}</p>

</div>
<div class="mt-6 text-center">

<Link to='/Checkoutpage'>

<button type="button" class="group inline-flex w-full items-center justify-center rounded-md bg-gray-900 px-6 py-4 text-lg font-semibold text-white transition-all duration-200 ease-in-out focus:shadow hover:bg-gray-800">

Checkout

<svg xmlns="http://www.w3.org/2000/svg" class="group-hover:ml-8 ml-4 h-6 w-6 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />

</svg>

</button> </Link>

</div>

</div>

</div>

</div>

</div>

</section>

<Footer />

</>

);

}

export default CartPage;

This code defines a React functional component named CartPage, which represents the shopping cart page of an e-commerce application. Let's break down the code:

Imports:

Link: Importing Link from "../../Utils/CustomUtils" for routing.
useEffect: Importing the useEffect hook from React for side effects.
Header, Footer, TotalPrice, Spinner: Importing components from "../../Components/AllComponentIndex".
useCartContext, useProductDataContext, useWishlistContext: Importing custom hooks from "../../Context/AllContextIndex" for accessing context data related to the cart, product data, and wishlist.
removeFromCart, updateQty, addToWishlist, deleteWishList: Importing functions from "../../Services/CartServices" and "../../Services/WishlistServices" for managing cart and wishlist actions.

Function Definition:

function CartPage() { ... }: Defines a functional component named CartPage.

Context and State Variables:

Retrieves context and state variables using custom context hooks: useWishlistContext, useProductDataContext, useCartContext.
Destructures variables like dispatch, wish, isLoading, cart, state, totalprice from the respective contexts.

Effect Hook:

Uses the useEffect hook to calculate the total price of items in the cart whenever the cart state changes. It dispatches an action to update the total price.

Component JSX:

Renders the header, which includes a cart icon indicating the number of items in the cart.
Displays a section for the shopping cart items, including product image, title, price, quantity, and buttons for removing items from the cart or wishlist.
Calculates and displays the subtotal and total price of the items in the cart.
Provides a "Checkout" button linked to the Checkout page using the Link component.

Export:

export default CartPage;: Exports the CartPage component as the default export.

In summary, the CartPage component renders the contents of the shopping cart, and allows users to update quantities, remove items, and proceed to checkout. It also interacts with the wishlist, allowing users to add or remove items.

The cart manager screen output is here :

Wishlist page

The wishlist page allows users to add products for future reffernce hereis the sample code .




import { React } from "../../Utils/CustomUtils";

import {

useProductDataContext,

useWishlistContext,

} from "../../Context/AllContextIndex";

import {

Footer,

Header,

ProductCard,

Spinner,

} from "../../Components/AllComponentIndex";



import "./Wishlist.css";

function WishlistPage() {

const { wish } = useWishlistContext();

const { isLoading } = useProductDataContext();



return (

<div>

<Header />



{isLoading ? (

<Spinner />

) : wish.length === 0 ? (

<div className="cart-mesg"> there are no items in Wishlist </div>

) : (

<div className="wishlist-cards">

{wish.map((wishlistpagedata) => {

return (

<ProductCard

productCardData={wishlistpagedata}

key={wishlistpagedata._id}

/>

);

})}

</div>

)}



<Footer />

</div>

);

}



export default WishlistPage;

This code defines a React functional component named WishlistPage, which represents the wishlist page of an e-commerce application. Here's a breakdown of the code:

Imports:

React: Importing the React object from "../../Utils/CustomUtils".
useProductDataContext, useWishlistContext: Importing custom hooks from "../../Context/AllContextIndex" for accessing context data related to product data and wishlist.
Footer, Header, ProductCard, Spinner: Importing components from "../../Components/AllComponentIndex".

Function Definition:

function WishlistPage() { ... }: Defines a functional component named WishlistPage.

Context and State Variables:

Retrieves context variables using custom context hooks: useWishlistContext and useProductDataContext.
Destructures variables like wish and isLoading from the respective contexts.

Component JSX:

Renders the header component.
Checks if data is loading. If loading, it displays a spinner component (Spinner).
If the wishlist is empty (wish.length === 0), it displays a message indicating that there are no items in the wishlist.
If the wishlist is not empty, it maps through each item in the wishlist (wish) and renders a ProductCard component for each item.

CSS Styling:

Applies CSS styles defined in the "Wishlist.css" file.

Export:

export default WishlistPage;: Exports the WishlistPage component as the default export.

In summary, the WishlistPage component renders the contents of the wishlist. If the wishlist is empty, it displays a message. Otherwise, it renders each item in the wishlist using the ProductCard component.

The Wishlist page output is here :

Checkout page

The checkout page is the page where we place actual details and give the consent to place the order in this project the page allows users to see what they are about to purchase under how much quantity and what the total cost to be paid, add an address to enable payments(testing mode) and then only the order will be placed here is the code.




import React from "react";

import {

Footer,

Header,

Checkout,

Spinner,

} from "../../Components/AllComponentIndex";

import { useProductDataContext } from "../../Context/ProductListingPageContext";



import "./Checkoutpage.css";

function Checkoutpage() {

const { isLoading } = useProductDataContext();

return (

<div>

<Header />

{isLoading ? <Spinner /> : <Checkout />}

<Footer />

</div>

);

}

export default Checkoutpage;

This code defines a React functional component named Checkoutpage, which represents the checkout page of an e-commerce application. Let's break down the code:

Imports:

React: Importing the React object from "react".
Footer, Header, Checkout, Spinner: Importing components from "../../Components/AllComponentIndex".
useProductDataContext: Importing a custom hook from "../../Context/ProductListingPageContext" to access context data related to product listing.

Function Definition:

function Checkoutpage() { ... }: Defines a functional component named Checkoutpage.

Context and State Variables:

Retrieves context variables using the custom hook useProductDataContext.
Destructures the isLoading variable from the context.

Component JSX:

Renders the header component.
Checks if data is loading. If loading, it displays a spinner component (Spinner).
If data is not loading, it renders the checkout component (Checkout).
Renders the footer component.

CSS Styling:

Applies CSS styles defined in the "Checkoutpage.css" file.

Export:

export default Checkoutpage;: Exports the Checkoutpage component as the default export.

In summary, the Checkoutpage component renders the checkout page of the e-commerce application. It first displays the header, then either a spinner or the checkout component based on whether data is loading, and finally the footer.

The Checkout page output is here :

Order success page

This page shows the order has been placed here is the code.




import React from "react";

import {

Footer,

Header,

OrderConfirm,

Spinner,

} from "../../Components/AllComponentIndex";

import { useProductDataContext } from "../../Context/ProductListingPageContext";



function OrderSuccessPage() {

const { isLoading } = useProductDataContext();

return (

<div>

<Header />

{isLoading ? <Spinner /> : <OrderConfirm />}

<Footer />

</div>

);

}
export default OrderSuccessPage;

This code defines a React functional component named OrderSuccessPage, which represents a page confirming the successful placement of an order. Let's break down the code:

Imports:

React: Importing the React object from "react".
Footer, Header, OrderConfirm, Spinner: Importing components from "../../Components/AllComponentIndex".
useProductDataContext: Importing a custom hook from "../../Context/ProductListingPageContext" to access context data related to the product listing.

Function Definition:

function OrderSuccessPage() { ... }: Defines a functional component named OrderSuccessPage.

Context and State Variables:

Retrieves context variables using the custom hook useProductDataContext.
Destructures the isLoading variable from the context.

Component JSX:

Renders the header component.
Checks if data is loading. If loading, it displays a spinner component (Spinner).
If data is not loading, it renders the order confirmation component (OrderConfirm).
Renders the footer component.

Export:

export default OrderSuccessPage;: Exports the OrderSuccessPage component as the default export.

In summary, the OrderSuccessPage component renders a page confirming the successful placement of an order. It displays the header, followed by either a spinner or the order confirmation component based on whether data is loading, and finally the footer.

The Order Sucess page output is here :

Profile manager page

The profile manager page shows the profile data, purchased product details and already added address here is the code




import React from "react";

import {

Footer,

AccountTabs,

Header,

Spinner,

} from "../../Components/AllComponentIndex";

import { useProductDataContext } from "../../Context/ProductListingPageContext";

import "./AccountPage.css";


function AccountPage() {

const { isLoading } = useProductDataContext();

return (

<div>

<Header />

{isLoading ? <Spinner /> : <AccountTabs />}

<Footer />

</div>

);

}

export default AccountPage;

This code defines a React functional component named AccountPage, which represents a page for managing user accounts. Let's break down the code:

Imports:

React: Importing the React object from "react".
Footer, AccountTabs, Header, Spinner: Importing components from "../../Components/AllComponentIndex".
useProductDataContext: Importing a custom hook from "../../Context/ProductListingPageContext" to access context data related to the product listing.
./AccountPage.css: Importing a CSS file for styling this component.

Function Definition:

function AccountPage() { ... }: Defines a functional component named AccountPage.

Context and State Variables:

Retrieves context variables using the custom hook useProductDataContext.
Destructures the isLoading variable from the context.

Component JSX:

Renders the header component.
Checks if data is loading. If loading, it displays a spinner component (Spinner).
If data is not loading, it renders the account tabs component (AccountTabs), which presumably contains different tabs for managing user account information.
Renders the footer component.

Export:

export default AccountPage;: Exports the AccountPage component as the default export.

In summary, the AccountPage component renders a page for managing user accounts. It displays the header, followed by either a spinner or the account tabs component based on whether data is loading, and finally the footer. The specific functionality of the account tabs is handled by the AccountTabs component.

The Profile Manager page output is here :

Authentication Pages:

The authentication pages are the most important part of any application as they allow the users to register on the platform and later log into the system with valid credentials.

It also helps to track the registered user data by providing a better user experience.

My application has two authentication pages one is a Signup page and another is a Login page, each page has different input types for user signup they will have to provide their name and email along with all these they also have to make a secure password that can be later used for login.

The Login page only accepts two inputs one is your registered email which you had used for the signup and the same registered password.

You can check both of screen output here :

Login Page

The Login page also has a Guest Login feature which will take you into the application without registering on the platform.

Signup Page

Summary

I have followed the clean code architecture as it allows me to display the code in a cleaner way making it easy to understand and maintain.
I Followed the standard folder structure for maintaining and separating the code into smaller chunks.
Complete coding follows the functional programming concept.
I am not a UI/UX guy the intention was to understand the React JS in a better way by building projects so I developed it without focusing much on the UI/UX part.

Thanks for Reading it you can see the complete code on github and can browse the project here

If you have anything to share with me or want me to develop some web app I am always open to opportunities you can connect here on Linkedin

Salesforce AI for Better Data Management: Automating Data Cleansing and Duplication

PRANKUR PANDEY — Thu, 28 Mar 2024 11:26:39 +0000

Did you know that Salesforce Einstein processes over 1 trillion transactions? It leverages AI, machine learning, and data analytics to give you a game-changing advantage.
Salesforce AI is redefining the approach to data management by automating the intricate tasks of data cleansing and duplication. Organizations that adopt this technology witness enhanced data quality and operational efficiency, making informed decisions faster and with greater confidence.
This article explores integrating AI technologies within Professional Automation Systems (PAS) to tackle common data management challenges. Manual processes are tedious and prone to errors, and duplicate records complicate decision-making. Salesforce AI promises streamlined and more accurate data handling.
Challenges in Identifying and Resolving Duplicate Records Manually

Among the leading stumbling blocks in manually identifying duplicate records is the volume of data. Organizations produce and accumulate huge amounts of data daily, making it difficult to identify duplicates.

The problem grows in the sense that it is still manual; people do not have the facility to detect duplicates with precision, especially if they are spread across diverse bases or systems.

Another challenge is inconsistent data entry. Record creation or updating is bound to human errors, such as misspelling words, formatting differences, or missing details.

All these obstacles prevent reconciling duplicate records. Identifying these deviations is a time-consuming and error-prone manual process. This may lead to the loss of genuine records and the retention of the wrong ones. It is also difficult to resolve manually because it involves protecting data and privacy.

10 Steps to Use AI-Driven Insights for Identifying Duplicate Records in Salesforce

The following ten steps will help you use Einstein AI to identify duplicate records:

Enable and Configure Einstein AI:

Salesforce's AI capabilities are powered by Einstein AI. Developers need to enable Einstein AI in their Salesforce environment. This may involve configuring specific Einstein AI features relevant to data management and duplicate detection, such as Einstein Data Insights. Read here how to enable it.

Set Up Data Models: Define and set up your data models in Salesforce. This involves identifying which objects (like contacts, leads, or custom objects) are prone to duplication and understanding the important structure and fields for your business processes.
Implement Data Quality Rules: Salesforce's data management tools implement data quality rules. These rules can include criteria for identifying potential duplicates, such as matching email addresses, phone numbers, or custom field values that should be unique.
Leverage Einstein Duplicate Management: Salesforce offers Einstein Duplicate Management tools that can be customized to detect and manage duplicates based on your data quality rules. Configure the Duplicate and Matching Rules to use AI-driven insights to identify potential duplicates. Read this guide to help you get started. Custom AI Models: For more complex scenarios, developers can build custom AI models using Apex or Einstein Platform Services. These models can be trained on your Salesforce data to recognize duplicates based on patterns that may not be evident through standard matching rules.
Integrate External AI Tools: If necessary, Salesforce can be integrated with external AI and machine learning platforms to enhance duplicate detection capabilities. This can be done through Salesforce's APIs, allowing for ingesting insights generated by external AI models.
Review and Act on Insights: Once duplicates are identified, use Salesforce's reporting and dashboard tools to review the AI-generated insights. Develop workflows or use Salesforce's automation tools to manage these duplicates, such as merging records or flagging them for manual review.
Continuously Train and Improve: AI models benefit from continuous training. Review the performance of your AI-driven duplicate detection processes regularly and adjust your models and rules as necessary to improve accuracy and efficiency.
Maintain Data Hygiene: Use AI insights to maintain overall data hygiene beyond identifying duplicates. This can include identifying incomplete records or patterns indicating data quality issues.
Educate and Empower Users: Finally, ensure that end-users and administrators know the importance of data quality and how to handle duplicates. Provide training on using the tools and reports available to manage duplicates effectively. Automating Data Cleansing with Salesforce AI Automating data cleansing with Salesforce AI involves a structured approach to ensure your data remains clean, accurate, and useful for your business operations.

Here’s how you can implement this using actionable steps:
Setting Up Data Quality Rules

Define Your Data Standards: Start by defining clear standards for your data. This includes formats for phone numbers, email addresses, date formats, and any custom fields specific to your business. Identify Key Fields for Quality Checks: Determine which fields are critical for your operations and should be prioritized for data cleansing. Common fields include customer contact information, lead details, and account records.
Use Validation Rules: Implement validation rules in Salesforce to ensure data entered into the system meets your predefined standards. This can include rules for mandatory fields, unique fields, and format validations. Leverage Formula Fields: Use formula fields to check data consistency and accuracy across related records. Using Pre-built AI Models
**Explore Available Models: **Salesforce Einstein offers a range of pre-built AI models tailored for common business needs. Explore the models available in Einstein Prediction Builder and Einstein Data Insights.
Activate Einstein Data Insights: Use Einstein Data Insights to automatically analyze your data and get suggestions for data quality improvements. This can help identify trends, outliers, and anomalies in your data. Implement Einstein Prediction Builder: Leverage Einstein Prediction Builder to create predictions based on your data quality criteria. For example, predict which records might have missing or incorrect information. Creating Custom AI Models for Specific Needs
Define Custom Model Criteria: If your data cleansing needs go beyond what's offered by pre-built models, identify the specific criteria for your custom model. This could be related to industry-specific data validation or complex data relationships.
Collect and Prepare Data: Gather historical data representing clean and problematic records. Clean and segment this data into training and test sets.
Build and Train Your Model: Use tools like Salesforce Einstein Platform Services or external AI platforms to build and train your model. Focus on the specific features (fields) most indicative of data quality issues. Test and Deploy: Test your model with the test data set and adjust it based on performance. Once satisfied, deploy the model into your Salesforce environment. Vonage's Transformation with Salesforce AI: A Beacon for Efficient Data Management

Vonage, a global leader in cloud communications, embarked on a mission to overcome challenges posed by siloed datasets and manual processes resulting from a series of acquisitions. The company's strategic pivot towards Salesforce Customer 360 underscored its commitment to unifying and automating data management to foster growth and enhance efficiency.

Centralized Communication Hub: Using Slack as a digital headquarters, Vonage significantly improved information dissemination among team members, reducing the time to collect and verify data from days to minutes. This automation of communication workflows enabled rapid customer service and enhanced productivity.
Seamless Data Integration: Vonage's implementation of MuleSoft was a game-changer, allowing it to bridge disparate data systems with a unique identifier. This integration facilitated a unified view of customer data across teams, setting the stage for deeper customer relationships and improved cross-selling opportunities.
Efficiency in Sales Operations: Vonage harnessed the power of Sales Cloud to streamline its quoting process, slashing the time from four days to mere minutes. This minimized human error and empowered sales agents with rapid access to product information, significantly boosting sales efficiency.
Data Visualization and Decision Making: The deployment of Tableau enabled Vonage to achieve a 360-degree view of its customers by visualizing data across business units on a single dashboard. This strategic move enhanced executive decision-making and provided clear insights into sales operations, driving informed go-to-market strategies.
Partnership for the Future: Vonage's collaboration with Salesforce Professional Services and its utilization of the Premier Success Plan illustrates a forward-thinking approach to leveraging technology for business growth. This partnership underscores the importance of expert guidance and tailored solutions in realizing technological aspirations.

Vonage's journey with Salesforce AI vividly illustrates how automation and intelligent data management can propel a company toward unprecedented operational efficiency and customer-centric growth. It is an inspiring success story for organizations looking to navigate the complexities of digital transformation in the telecommunications industry and beyond.

Read more about this case study on Salesforce’s customer stories.

Final Thoughts
A conclusion is the final part or section of any writing or discourse. It sums up the whole discussion and gives closure to the reader. Be it an essay, research paper, or even a speech—the conclusion is that last attempt to leave a lasting impact and ensure a satisfying end.

Essentially, the conclusion summarizes the main points or arguments in the body of the work; in other words, it reminds the reader of the key ideas and restates the overall message underlined in the whole writing. Finally, the outline of the main points and their importance in the topic of discussion will be restated, making everything distinct from the meaning of the paper to the reader.

In addition to summarizing and providing a personal perspective, a good conclusion also offers closure to the reader. The conclusion is meant to sum up any loose ends or questions that may have arisen during the writing. This may be achieved by offering solutions, pointing out the need for further research, or giving a call to action. A sense of completion is given as the conclusion reaches out to the reader, letting the reader know what the writer wanted to get across to him.

The article is written by Gia Radnai

Git Security: Best Practices for Keeping Your Code Safe

PRANKUR PANDEY — Wed, 24 Jan 2024 10:56:05 +0000

Did you know that around 99% of open-source projects use version control, and Git is the most popular tool? Git security is of utmost importance due to the sensitive nature of the code and the potential risks associated with unauthorized access, data breaches, and malicious attacks.

Ensuring the security of Git repositories and the code within them is crucial for maintaining the integrity and confidentiality of the software.

This article aims to highlight the significance of Git security and provide practical tips and best practices for securing Git repositories. It will discuss the potential security vulnerabilities in Git, such as unauthorized access, code injection, and data manipulation, and offer guidance on mitigating them.

Understanding Git Security Risks

Git, as a version control system, has its own set of security risks that users need to be aware of. Common security threats when using Git include unauthorized access, code injection, malicious commits, and credential theft.

Unauthorized access can occur when someone gains access to a Git repository without permission. This can lead to sensitive code and data being exposed or modified without authorization. Code injection is another security threat, where malicious code is inserted into the Git repository, compromising the integrity of the codebase.

Malicious commits are a security threat where unauthorized changes are made to the codebase, potentially introducing vulnerabilities or backdoors. Finally, credential theft is a major concern when using Git, as stolen credentials can lead to unauthorized access to repositories and sensitive information.

Best Practices For Git Security

To maintain a secure and effective Git workflow, it's important to adhere to certain best practices. These recommendations can help protect your code and sensitive information from unauthorized access or compromise.

This next section will touch on 5 of the most important best practices around Git security. These include ensuring Git is kept up to date, not committing sensitive information, guarding access to Git repositories, making sure to keep your branches protected, and signing your work with GPG keys.

Ensure Git Is Kept Up To Date

To ensure Git is kept up to date, it is important to check for updates periodically. This can be done by running the command git --version and comparing the version with the latest stable release.

If an update is available, consider using package managers or visiting Git's official website to install the latest version. It is also essential to monitor security advisories related to Git and update promptly in case of any security patches.

Security updates protect the system and its data from potential vulnerabilities. Therefore, staying proactive and consistently updating Git will help ensure the software remains secure and performs optimally.

Don't Commit Sensitive Information

When working with Git, it is important to be cautious about committing sensitive information such as passwords, API keys, and configuration files. One way to prevent accidental commits of such sensitive data is by using a .gitignore file.

This file allows you to specify certain files or directories that should be excluded from version control. By adding sensitive files or directories to the .gitignore file, you can ensure they are not accidentally committed or pushed to a remote repository.

In addition to using a .gitignore file, it is also recommended to utilize tools like git-secrets to prevent the accidental commit of sensitive data further. Git-secrets is a tool that scans commits, commits messages, and other aspects of your Git repository to prevent any leaks of sensitive information.

Remember, the security of your codebase is crucial, and it is important to be mindful of the files and information you are committing. Always exercise caution and adhere to best practices when handling sensitive data in your Git repositories.

Guard Access To Git Repositories

To ensure the security of our Git repositories, we have implemented strong authentication mechanisms such as SSH keys and personal access tokens for all repository access. This ensures that only authorized individuals can access the code base and make changes.

We also regularly review and update access permissions for collaborators based on their roles within the organization. This allows us to ensure that individuals only have access to the repositories necessary for their specific responsibilities, thus reducing the risk of unauthorized access.

In addition, we have enabled two-factor authentication (2FA) for an added layer of security. This requires users to provide a second form of authentication, such as a code sent to their phone and their password when accessing the repositories. This significantly reduces the risk of unauthorized access if a password is compromised.

Make Sure To Keep Your Branches Protected

To keep your branches protected, it is important to restrict direct pushes to main branches and instead encourage pull requests for code review. This ensures that all changes to the main branches go through a thorough review process before being merged.

Setting branch protection rules is essential to enforce code review, status checks, and other criteria before merging. This helps maintain the quality of the codebase and prevents any potentially harmful or unreviewed code from being merged.

Regularly auditing branch permissions is crucial to remove unnecessary access and ensure that only the appropriate team members can make changes to the codebase. This helps to prevent any unauthorized changes and maintains the security and integrity of the code repository.

Sign Your Work With GPG keys

First, to begin signing your work with GPG keys, generate a GPG key pair using the command gpg --gen-key. Follow the prompts to create a strong key pair associated with your Git identity.

Next, configure Git to use the GPG key for signing commits using the command git config --global user.signingkey . Replace with the ID of the key you generated.

Once your GPG key is set up with Git, it's important to encourage contributors to sign their commits. This creates a verifiable trail of code changes, helping to maintain the integrity and authenticity of the project's source code.

Final Word

As we wrap up, let's quickly recap some of the best practices we've discussed. It's important to always follow a clear and consistent Git workflow, using branches, pull requests, and code reviews to ensure code quality and collaboration. Additionally, we cannot overemphasize the importance of Git security. This includes regularly updating Git, using HTTPS or SSH for remote repositories, and being cautious with authentication credentials.

As we move forward, let's encourage continuous improvement with our Git processes. This means regularly seeking feedback, learning new Git techniques, and staying updated on best practices in the industry. By staying proactive and open to change, we can ensure that our Git workflows are always optimized for efficiency and collaboration.

Ultimately, the key to mastering Git lies in a commitment to ongoing learning and improvement. With this mindset, we can continue to elevate our development processes and produce higher quality code.

Master Front-End Basics: The Perfect Blend of HTML, CSS, and JS to Jumpstart Your React Journey

PRANKUR PANDEY — Mon, 25 Jul 2022 12:14:47 +0000

As a technical writer who has completed five React projects, I’ve gained hands-on experience in using React to build advanced user interfaces. To get started with React, it's essential to have a solid understanding of HTML, CSS, and JavaScript (JS). These three technologies form the foundation of web development and are crucial for creating dynamic and responsive applications.

While learning these technologies may seem daunting, you don’t need to know everything at once. Instead, focus on the core concepts you’ll use most often in your React projects.

how much you should know about these technologies ? It completely depends upon your project requirements as

HTML, CSS, and JS have numerous elements and properties that are updated regularly, so it's crucial to focus on the ones that you will use frequently. This article will provide you with a guide on the fundamental HTML, CSS, and JS concepts that will be useful as you start building React projects.

Why Learn HTML, CSS, and JavaScript for React?

React is a powerful library for building user interfaces, but it requires a good grasp of HTML, CSS, and JS. If you're not comfortable with these foundational technologies, you’ll likely face challenges as you build your React apps.

You might wonder: "There are so many HTML elements, CSS properties, and JS concepts—how much should I learn before diving into React?"

The answer depends on your project requirements. HTML, CSS, and JS are vast, and they’re constantly evolving. However, some concepts will be used in almost every React project, no matter the size or complexity.
there are a few things that you will use no matter how big/small your react projects are?

So let's get started as you know

a)HTML is for structuring web page
b)CSS is for the designing web page
c)JS is for logic

So here are some fundamentals of HTML CSS and JS that will be very useful if you are just starting with the web, remember you have to make something of your own, even a small calculator program will add value to it.

Core HTML Concepts for React

HTML (HyperText Markup Language) is used to structure web pages. In React, you'll frequently use HTML elements to define your UI components.

Here are some important HTML concepts to understand before starting with React:

1. Semantic HTML
Semantic HTML elements like <header>, <footer>, <nav>, <section>, and <article> improve accessibility and SEO. While React itself is not inherently SEO-friendly, using semantic HTML ensures better indexing by search engines and improves the user experience.

2. <div> and <span>
These are essential for grouping elements on the page. While <div> is a block-level element and <span> is an inline element, both are widely used in React components.

3. Links
Links (<a>) are used for navigation, and in React, you'll often use the Link component from React Router to navigate between pages.

4. Images
Including images (<img>) is essential for a visually appealing UI. React efficiently handles image rendering, making it a vital part of most projects.

5. Lists
Ordered (<ol>) and unordered lists (<ul>) are frequently used in headers, footers, and navigation menus. You’ll also use lists to render dynamic content in React, such as with the .map() function.

6. Forms and Inputs
Forms (<form>) and input elements (<input>, <select>, <textarea>) are crucial for gathering user data. React makes managing forms easier through controlled components.

7. IDs and Classes
Using id and class attributes helps with styling and targeting elements in JavaScript.

By understanding these core HTML concepts, you’ll be ready to structure your first React app.

If you know these tags then you can easily start structuring your first webpage.

Now we have made the structure of the web page it's time to beautify it, to do so will use CSS.

Key CSS Concepts for React:

CSS (Cascading Style Sheets) is used to style HTML elements and create visually appealing web pages. In React, you’ll use CSS to style your components and make them responsive.

Here are some important CSS concepts to master:

Height and Width These properties control the size of elements. Understanding how to set dimensions is crucial for layout design.
Colors and Fonts Learn how to apply colors and font styles to make your UI more engaging. CSS offers various ways to define colors (hex, RGB, etc.) and font properties (size, weight, etc.).

3. CSS Units
Understanding units like rem, px, and % is essential for responsive design. Each unit behaves differently, so knowing when to use them will help you create scalable UIs.

4.Flexbox and Grid
These layout systems are vital for aligning and positioning elements in a responsive way. Flexbox is particularly useful for smaller projects, while Grid is great for complex layouts.

5.Positioning
The position property helps control the placement of elements on a page. Whether you need to fix an element to the top of the page or push to is to bottom.

6.Borders
Borders not only help in styling elements but also assist in debugging CSS issues.

7.Text Properties
Mastering text properties like font-size, text-align, and line-height will help you control typography in your React app.

8.Backgrounds
Backgrounds can include both colors and images. Knowing how to manipulate backgrounds can significantly enhance your app’s visual appeal.

With these CSS skills, you can style and beautify your React components, making them look professional and polished.

Essential JavaScript Concepts for React:

JavaScript (JS) is the backbone of interactivity in web development. In React, JS allows you to manage state, handle events, and interact with the DOM (Document Object Model).

Here are some key JS concepts to know:

1.ES6+ Syntax
React heavily relies on modern JavaScript features like arrow functions, destructuring, template literals, and the spread/rest operators. Familiarize yourself with these features to write clean, efficient React code.

2.JS Arrays
Arrays are crucial in React for handling lists of data. You’ll often use methods like .map() to render lists dynamically.

3.JS Objects
Objects store data in key-value pairs. You’ll frequently use objects to manage state in React.

4.Clean Code Principles
Writing clean, maintainable code is essential in React. Follow best practices, such as giving functions and variables descriptive names and keeping functions focused on a single task.

Here’s an example of clean React code:

import React, { useEffect, useState } from "react";

function Demo() {
  const [data, setData] = useState([]);

  function fetchData() {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error(error));
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
    `<div>`
      {data.map((item) => (
        `<h1 key={item.id}>`{item.title}`</h1>`
      ))}
    `</div>`
  );
}

export default Demo;

In this example, we create a simple component that fetches data from an API and displays it. The function names are self-explanatory, and the code is structured for readability.

5.Loops
Loops are like loops means it will iterate until they found the specific condition,there are many loops like for , foreach,while.

6.Higher Order Functions
Map, filter, and reduce are higher order functions (HOFs) in JavaScript that are commonly used to manipulate data:

Map
Creates a new array by applying a callback function to each element in the original array.

Filter
Creates a new array by selecting elements that pass a condition specified by a callback function.

Reduce
Applies a callback function to each element in an array to produce a single value.

7.String & Conditions
Strings :
Strings are bunch of characters having sound understanding of string manipulations helps in dealing with string related work.
Conditions :
Conditions are backbone of any programming language so does with javascript ,Conditions helps to designs the systems more logically and handling edge level cases, some examples like** if , **if-else,*if-else-if * are mandatory to understand.

Conclusion:
Mastering the core concepts of HTML, CSS, and JavaScript is essential to building React projects. You don’t need to know everything upfront, but focusing on the key concepts discussed in this article will give you a solid foundation for building functional and beautiful UIs.

As you gain experience, you'll naturally expand your knowledge and skills, allowing you to take on more advanced React projects.

If you found this guide helpful, feel free to share it and start building your first React app!
You can connect to me here : LINKEDIN
TWITTER