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 section, you’ll learn how to take the exact pixel values you see in the Figma Inspector and turn them into Tailwind utilities.

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, and that number becomes your Tailwind utility.

Example:

Prefixes you should 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:

Step 3: Converting Font Sizes

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

Example:

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.

Alright, back to our workflow:

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.

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

• Builder.io is visual CMS with Figma integration and a visual editor that can export components for web apps.

• Kombai is an IDE extension that converts selected Figma frames into React/NextJS/React Native code and offers repo-aware features.

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 Insights.

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

For me, a system means a set of rules, processes, and triggers that guide the entire workflow. This helps you conserve energy and not have to figure things out in the moment. It keeps things productive, efficient, and consistent.

Now that the chaos has settled, I’ve been thinking a lot about systems – not just in life, but in tech. I wish I had applied the same principles of system design earlier.

In this article, we’re going to explore real-world system design examples from domains like gaming and job platforms. These industries don’t just scale massively – they also demand high availability, low latency, and seamless customer experiences. Understanding how they’re built is a powerful way to level up your thinking as a developer or architect.

What We’ll Cover

1. Introduction: What is System Design and Why Scale Matters

2. Approaches to System Design

   • 1. Bottom-Up Approach

   • 2. Top-Down Approach

   • 3. Hybrid Design

3. Important Concepts in System Design

   • Full Stack Web Application Components

   • How Computers Talk to Each Other (The Internet)

   • The Problem of Growth

   • Speeding Up Your Website with Caching and CDNs

   • Building Your Application: Monolith vs. Microservices

   • The APIs

   • Handling Real-Time Data

   • Databases

   • Understanding the CAP Theorem

   • Rate Limiting and Monitoring

4. Case Studies: Scaling in the Real World

   • Case Study 1: Scaling a Job Search Application

   • Case Study 2: Scaling an Online Gaming Application

5. Q&A

6. Final Notes

7. Conclusion

Introduction: What is System Design and Why Scale Matters

System design is the process of defining the architecture, modules, interfaces, and data of a system.

In other words, system design means explaining the different parts of a system, like its structure, building blocks (modules), and components.

It’s a process used to define, develop, and design a system in a way that meets the specific needs of a business or organisation.

The main goal of system design is to give enough information and details about the system, and to properly implement its parts using models and views. Let’s now talk about the different parts of a system.

Elements of a System:

• Architecture: This is a basic structure or model that shows how the system works, looks, and behaves.
  We often use flowcharts to explain and represent this architecture.

• Modules: These are smaller parts or sections of the system. Each module handles a specific task. When all modules are combined, they make the complete system.

• Components: These provide a specific function or a group of related functions. Components are usually made from one or more modules.

• Interfaces: This is the connection point where different parts (components) of the system exchange information with each other.

• Data: This refers to managing information and how it flows through the system.

Why System Design Matters

System design is important for a number of practical reasons. First, it can help companies and teams solve complex business problems and make sure they thoroughly analyse all requirements before building. It also reduces the chance that errors will be introduced into processes while making design phases more efficient and structured. Finally, it helps you efficiently gather and present your data in a useful format and improves the overall quality of the system.

Approaches to System Design

There are several methods you can use to approach system design. The main ones are:

1. Bottom-Up Approach

In this method, the design starts from the lowest-level components or subsystems. These small parts are gradually combined to form higher-level components. This process continues until the entire system is built as one complete structure.

The more abstraction we use, the higher the level of the design becomes.

Advantages:

• Components can be reused in other systems.

• It’s easier to identify risks early.

• It helps in hiding low-level technical details and can be combined with the top-down approach.

Disadvantages:

• It’s not very focused on the overall structure of the problem.

• Building high-quality bottom-up solutions is hard and time-consuming.

2. Top-Down Approach

Here, the design starts from the entire system, and you break it down into smaller subsystems and components as you go. Each of these subsystems then gets broken down further, step by step, creating a hierarchical structure.

In simple terms, you start with the big picture and keep dividing it until you reach the smallest parts of the system.

To sum up, design starts with defining the whole system, then continues by defining its subsystems and components. When all definitions are ready and fit together, the system is complete.

Advantages:

• The focus is on understanding the requirements first, which leads to a responsive and purpose-driven design.

• It’s easier to handle errors in interfaces between components.

Disadvantages:

• Components can’t be reused easily in other systems.

• The resulting architecture is often less flexible or not very clean.

3. Hybrid Design

The hybrid design approach is a mix of top-down and bottom-up methods. Instead of committing to just one way, it takes the strengths of both. You start by looking at the overall system (like in top-down) so that you don’t lose sight of the big picture. At the same time, you also focus on building solid, reusable modules or components (like in bottom-up).

In simple terms, you first plan the big picture, then create smaller components that can work independently, and finally combine everything into a cohesive system.

For instance, in our sports team site, we’d use top-down to define the whole fan journey (homepage → match details → live scores). But bottom-up, we’d build modular components like authentication or stats tracking, which can later be reused in new features like ticket booking or merchandise sales.

Advantages:

• You get the clarity of a top-down plan while still building reusable modules.

• It strikes a balance between high-level design and detailed implementation.

• Risks are easier to manage since you’re considering both structure and components.

Disadvantages:

• It can be complex to manage since you’re juggling two approaches.

• Requires more coordination between teams working on different levels.

• It might take more time compared to using a single approach.

Important Concepts in System Design

Before exploring core components, I want you to first understand two key concepts:

• Full stack web application components

• How computers talk to each other (via the internet)

Full Stack Web Application Components

A full-stack web application is a software application that combines both the frontend (what users see and interact with) and the backend (the server, database, and logic that power the app) into one complete system.

Generally, simple websites don’t require much system design – and in some cases, no system design at all. But when it comes to viral applications or platforms offering complex services, system design becomes essential. Most modern applications are full-stack applications, meaning they involve multiple interconnected layers working together.

Here’s a simplified overview of a typical full-stack application:

Before diving deep into each of these components, let me first give you a quick, high-level overview of what they are and how they fit into the bigger picture (starting from the bottom of the image above).

• Frontend – The user interface where people interact with your application.

• Backend – The logic and brain of the application that processes requests.

• APIs – The bridge that allows communication between frontend, backend, and external services.

• Database – The storage system where all your structured information lives.

• Server – The infrastructure that hosts, runs, and delivers your application.

Now, we need to understand how computers talk to each other.

How Computers Talk to Each Other (The Internet)

When you type a website's URL into the browser – and this site could be a simple portfolio site or a full stack app – how does your computer know where to send the request? It uses the Domain Name System (DNS). The DNS is like a phonebook for the internet – it translates a human-readable website name, like "example.com," into a unique numeric IP address that computers can understand.

Once your computer has the IP address, it uses communication protocols to send and receive data. One of the most important protocols is TCP. It breaks data into small, numbered packets. If a packet gets lost or arrives out of order, TCP ensures it's resent and reassembled correctly, making it a very reliable way to send data.

On top of TCP, we use higher-level protocols like HTTP. This is an application-level protocol that's easier for developers to use. It's the language your browser speaks to the server.

HTTPS is the same, but it adds an extra layer of encryption for security.

Now that we understand the basics of the Internet, remember that it serves billions of people worldwide.

Let’s break this down with a real-life example. Imagine you own a restaurant with a seating capacity of 50 people. One day, 10 extra guests arrive – and with a bit of adjustment, you still manage. But suddenly, a thousand more people show up at your door. What would you do then? It’s not just about adding more chairs and tables anymore – you’ll need extra food supplies, more staff, and a bigger setup to handle such massive traffic.

This simple example reflects the real challenge of growth and scalability. And that’s exactly what I’ll be diving into in the next chapter of this tutorial.

The Problem of Growth

Imagine you've built a simple website for a local sports team. Initially, it's just you and a few friends using it, so a single server is sufficient. This server holds all the website's logic and connects to a single database where player stats are stored.

As the team becomes more popular, though, more people visit your site, and it suddenly becomes slow. This is a scaling issue. Your system can't handle all the new traffic.

Scaling Your System: Two Main Ways

There are two ways to solve this. The first is vertical scaling. This is like giving your one server a bigger engine and more memory. You'd upgrade the CPU (the brain) or add more RAM (temporary memory). You could also use a faster disk storage like an SSD.

The problem is, you can only upgrade so much before you hit the limits of what's available. Plus, if that single server fails, your entire website goes down.

A better approach is horizontal scaling. This means adding more servers instead of just upgrading one. Now you have a team of servers, and each can handle a portion of the incoming user requests.

This approach allows for almost unlimited growth. It also creates redundancy and fault tolerance, because if one server breaks, the others can pick up the slack, and your site stays online.

Directing Traffic with a Load Balancer

With multiple servers, you need a way to make sure no single server gets overwhelmed. This is where a load balancer comes in. It acts like a traffic cop, sitting in front of your servers and directing each new request to the best-suited server. It uses different algorithms to decide where to send the traffic.

For example, the Round Robin method sends requests to servers one by one, in a cycle. Another method is Least Connection, which sends the request to the server that has the fewest active connections.

Speeding Up Your Website with Caching and CDNs

Imagine your website is now used by people all over the world. A user in another country might experience slow loading times because their request has to travel all the way to your servers.

To fix this, you can use a Content Delivery Network (CDN). A CDN is a network of servers around the world that store copies of your website's static files – like images, videos, and text files. When a user requests one of these files, the CDN serves it from the closest server, making the website load much faster for them.

This process is a form of caching. Caching is the general idea of making copies of data and storing them in a faster-to-access location. You can cache data on your server so it doesn't need to fetch the same player stats from the database every time. This reduces the load on your database and speeds up the entire application.

You can read more about the difference between CDNs and caching here.

Building Your Application: Monolith vs. Microservices

As your website grows, its code can become a tangled mess. You might start with a monolith, where all the features (like player stats and live scores, in our example) are built into a single, large program. A monolith is easier to start with, but it can be hard to manage and update.

A better approach for a large-scale application is to use a microservice architecture. This means breaking your application into smaller, independent services, each with a specific job. For example, one service could handle player stats and another could handle live scores. This makes your code more organised and easier to update, because a change in one service won't affect the others.

With microservices, you need an API Gateway. This acts as a single entry point for all user requests, directing them to the correct microservice behind the scenes. It also handles security and other common tasks.

The APIs

Think of APIs (Application Programming Interfaces) as the “middlemen” that let different pieces of software talk to each other.

In simple terms, an API is like a waiter in a restaurant. You (the user) tell the waiter what you want, the waiter takes your order to the kitchen (the system), and then brings the food (data or result) back to you.

Without APIs, your app, website, or software wouldn’t know how to ask another system for information or services.

For example, on our sports team website:

• The front-end (what fans see) uses an API to fetch player stats from the database.

• When someone buys match tickets, the API talks to the payment system to confirm the transaction.

• If fans want live score updates, the API makes sure the real-time data flows smoothly from the server to their screen.

So, APIs are important for system design because they shape how efficiently different systems connect, share data, and stay reliable under real-world use.

Your front-end and back-end services can communicate in several ways. The most common is a REST API. It's a standardised set of rules that uses HTTP to create a consistent way for a client and server to talk to each other. For example, it defines a standard way to signal a successful request ("OK") or a server error ("Internal Server Error").

When to use REST

• Best when: you need simplicity, broad adoption, and easy integration with browsers, mobile apps, or third-party services.

• Example: CRUD apps (blogging platforms, e-commerce sites, user management).

• Strength: Human-readable JSON, stateless, widely supported.

• Weakness: Over-fetching (getting more data than needed) or under-fetching (not enough data).

Another style is GraphQL. Instead of getting all the data a REST API provides, GraphQL lets the client ask for only the specific data it needs, which can make things faster and more efficient.

When to use GraphQL

• Best when: clients (like mobile apps) need fine-grained control over exactly what data they fetch.

• Example: social media feeds, dashboards with lots of widgets, mobile apps with limited bandwidth.

• Strength: Flexible queries, reduces over-fetching, strong typing system.

• Weakness: More complex server setup, which can cause performance issues if queries aren’t optimised.

For server-to-server communication, gRPC is often used. It's known for being very fast because it uses a more efficient data format called Protocol Buffers instead of JSON.

When to use gRPC

• Best when: services talk to each other in microservice architectures, and speed/efficiency is critical.

• Example: real-time systems (streaming, payments, IoT, machine learning inference).

• Strength: Super fast (binary Protocol Buffers), built-in support for streaming, strong contracts.

• Weakness: Not browser-native (needs extra tooling for web), harder debugging compared to REST

So to summarize based on my observations of what I have worked on so far:

• If you’re building something public-facing and widely consumed → go for REST.

• If your app has complex, dynamic queries from clients → go for GraphQL.

• If you’re dealing with high-performance internal service-to-service calls → go for gRPC.

In system design, choosing the right API style directly affects performance, scalability, and user experience. If you pick REST for its simplicity, GraphQL for its flexibility, or gRPC for its speed, you’re shaping how well your system can grow and adapt as real-world demands change.

Handling Real-Time Data

Real-time data handling is challenging because it requires maintaining an active connection to continuously transmit and receive data simultaneously. Traditional servers follow a request–response model, where data is only sent when explicitly requested.

That's where WebSockets come in. Unlike HTTP, which is a one-and-done request-and-response model, a WebSocket creates a continuous, two-way connection between the client and server. This allows the server to send updates to the user as soon as they happen, creating a real-time experience.

When microservices need to communicate without being directly connected, they can use message queues. A service sends a message to the queue, and another service picks it up when it's ready. This helps to decouple the services, so they don't have to worry about the other service being available at that exact moment.

On our sports site, WebSockets allow fans to see live scores instantly without refreshing the page – just like in chat apps, but here it keeps the excitement of the game alive in real time

Databases

Databases are a critical part of any full-stack application because they serve as the permanent home for user data. Once you’ve decided how to scale your servers and manage communication, you also need to consider the database layer. If everything else scales but the database does not, it can quickly become a bottleneck – leading to crashes, inconsistent records, or even data loss.

Many applications rely on relational databases (SQL), which store data in structured tables with rows and columns and are great for handling structured information. But for applications requiring high flexibility or handling massive unstructured datasets, NoSQL databases (like MongoDB or Cassandra) are often chosen. These databases don't follow the strict rules of SQL and are better for handling massive amounts of data.

They follow ACID properties:

• Atomicity: A transaction is all or nothing.

• Consistency: The data always remains in a valid state.

• Isolation: Multiple transactions don't interfere with each other.

• Durability: Once a transaction is complete, the data is permanently saved.

Just like with servers, you might need to scale your database. You can use sharding, which divides your data across multiple databases, or replication, which creates copies of your database to handle more read requests.

Understanding the CAP Theorem

When you're dealing with a distributed system and multiple databases, you inevitably face trade-offs. The CAP Theorem states that you can only guarantee two out of the following three properties at the same time:

• Consistency – Every user sees the same, most up-to-date data.

• Availability – The system is always available to respond to requests.

• Partition Tolerance – The system continues to operate even if a part of the network fails.

Now, from a system design perspective, this theorem forces us to make conscious architectural choices. For example, in financial applications (like banking), consistency often takes priority over availability because even a small inconsistency in balance data can cause chaos.

On the other hand, in social media feeds, availability and partition tolerance are often prioritised – it's okay if you see a slightly outdated post, but the system should never be down.

In the flow we’ve been discussing, whenever we introduce a new component or scale out across multiple regions, we need to reassess which two guarantees matter most for our business case. That decision directly drives what database technology we pick, how we design failover strategies, and what trade-offs we accept in user experience.

In short, the CAP theorem isn’t just a theory – it’s a practical compass. It guides us to balance user expectations, business priorities, and technical feasibility without breaking existing functionality, while still leaving room for future growth.

Rate Limiting and Monitoring

When designing a system, it’s not just about making it work – it’s about making it resilient. Two core guardrails here are rate limiting and monitoring.

What is Rate Limiting?

Rate limiting is the practice of controlling how many requests a user, client, or service can make to your system within a given timeframe. For example, you might cap an API at 100 calls per user per hour. This prevents abuse, safeguards against denial-of-service attempts, and ensures fair usage across all consumers.

Rate limiting comes into play any time your service is exposed publicly or internally to multiple clients.

To incorporate it, you can implement limits at the API gateway, reverse proxy (like NGINX), or within your service logic itself. Many cloud providers (AWS API Gateway, GCP Endpoints) also have built-in support.

What is Monitoring?

Monitoring is the practice of collecting metrics, logs, and traces from your system to understand its health in real time. Typical signals include:

• Error rates (for example, how often requests fail)

• Latency (how long requests take)

• Traffic volume (load across the system)

• Resource utilisation (CPU, memory, disk, and so on)

Monitoring is important from day one – it’s your feedback loop. Without it, you’re essentially flying blind.

To work it into your system, you can use observability stacks like Prometheus + Grafana, or managed solutions like Datadog, New Relic, or CloudWatch. You can also set alerts for threshold breaches (for example, 5% error rate spike).

In practice, rate limiting and monitoring work hand-in-hand. Rate limiting proactively guards against overload, while monitoring gives you visibility into whether the limits are working, whether scaling is needed, or whether a new type of failure is emerging.

For example, if you’ve designed a booking system (like in our earlier flow), rate limiting would ensure a single user can’t spam seat reservations, while monitoring would flag anomalies such as unusual spikes in request volume or sudden latency increases – helping you act before the system collapses.

Why Does This Matter for System Design?

These topics matter for good system design because they form the foundational building blocks of how modern applications actually operate in the real world. The way systems communicate, the type of APIs we adopt, and how we manage real-time interactions directly influence whether a product feels fast, reliable, and seamless – or slow and frustrating. In short, they determine how well the overall experience holds up when real users put it to the test.

When we develop a deeper understanding of how computers communicate, we begin to see the inner mechanics of client–server architecture – how APIs fetch data from databases through backend system calls. From this baseline, we can pivot into higher-level concerns:

• Scalability and resilience: Using load balancers to protect against server overload.

• Security: Introducing rate limiting to mitigate potential cyberattacks.

• Efficiency: Choosing the right type of API calls and leveraging caching/CDNs for speed and reduced overhead.

• Reliability: Implementing logging and monitoring to detect issues early and debug faster.

Together, these practices elevate a system from simply working to being robust, performant, and future-ready.

We’ve discussed the basics of all the most important concepts you’ll need to understand before building an end-to-end system. Now it’s time to deep dive into the case studies, where I’ll show you how different types of applications use system design to scale and serve billions of users.

I have picked services that are complex to build and handle multiple different types of components at a time, like gaming, education, and job search platforms.

Now let’s decode each of them together, and I’ll explain how I would scale the application if I were the developer building it.

Case Studies: Scaling in the Real World

System design is best understood when you see it in action. To show how principles like scaling, caching, load balancing, and real-time data management come together, let’s walk through two very different types of applications:

• A job search platform (focused on structured data and reliability).

• An online gaming platform (focused on real-time speed and responsiveness).

Looking at both will show you that, while the tools and concepts may be similar, the way we apply them depends on the type of system we’re building.

Both are high-traffic platforms, but with totally different needs. The job portal is about accuracy, reliability, and data-driven workflows, while the gaming platform is about instant responsiveness, fairness, and global reach.

In a job portal, a 1-second delay just means waiting. In a gaming app, a 1-second delay could mean losing the match. Both are failures – but for completely different reasons, and with different consequences.

Together, they show how the same building blocks of system design (scaling, caching, APIs, monitoring) are applied differently depending on context.

Case Study 1: Scaling a Job Search Application

A job search platform is one of the most used applications nowadays, as there are always people looking for a job. And there are many different job portals out there that handle the complete process, from finding jobs to user onboarding.

We’ll look at an example site called Upstaff. It’s a platform that focuses on hiring AI engineers as its core service (although it services other job profiles as well). At its core, it handles structured information – things like user profiles, job postings, and applications.

Day one, you have a few hundred users. On day one hundred, you may have tens of thousands. And in a year? Possibly millions. That growth means you have to think about scale, speed, and data integrity from the start.

🔹 The Core Components

• User Management: registration, login, and role-based access (job seeker vs employer).

• User Profiles: résumés, skills, preferences, stored in structured databases.

• Job Posting and Listings: employers create jobs, seekers browse/search/filter.

• Application Tracking: Every job seeker’s application status needs to be accurate and up to date.

• Recommendation Engine: jobs matched to users based on history and profile.

• Notifications: alerts for new job matches, recruiter replies, deadlines.

Every one of these features depends on the system’s ability to handle large amounts of structured data – and handle it reliably.

Step 1: Starting Small

At the beginning, everything can run on one server with a single database. This setup is enough for a few thousand users.

Step 2: Growth and Traffic Spikes

As more users join, the single server starts to slow down. To fix this, we add a load balancer and scale horizontally – adding multiple servers that share the traffic.

Step 3: Database Challenges

Soon, the database becomes the bottleneck. Searching across thousands of jobs slows things down. To fix this, we:

• Use sharding (split the database by user IDs or job IDs).

• Add a cache (like Redis) to store frequent queries such as “Software Engineer in New York.”

• Use a CDN to deliver logos, profile pictures, and other static files faster.

Step 4: Heavy Features

New features like a résumé parser or recommendation engine require extra computing power. Instead of overloading the main app, we move these into separate microservices.

Step 5: Security and Reliability

Finally, as traffic grows, we add:

• Rate limiting to stop any one user from spamming APIs.

• Monitoring to track errors, latency, and user activity in real time.

• API Gateway to ensure all requests are secure and validated. Here is an overview of the entire system scaling in an image :

This example shows how careful planning makes growth smooth. By scaling horizontally, caching smartly, and splitting heavy features into microservices, a job portal like Upstaff can handle millions of users without breaking.

Case Study 2: Scaling an Online Gaming Application

Now let’s flip the script. In a gaming platform like this site, speed and responsiveness matter more than anything. A 1-second delay in a job search is annoying. But in gaming, a 1-second delay can make players quit forever. Unlike job portals, the biggest challenge here is real-time responsiveness. A tiny delay can ruin the user experience.

🔹 The Core Components

• User Management Service: accounts, profiles, and login.

• Game Lobby and Matchmaking: pair players by skill, region, and latency.

• Game Server Manager: spin up and manage live matches.

• Real-Time Communication: powered by WebSockets or UDP for low latency.

• Game State Store (Redis): fast sync of health, scores, and positions.

• Leaderboard & Stats Engine: global rankings, achievements, and progress.

• In-Game Economy: coins, tokens, inventory.

• Payment Gateway: subscriptions and purchases.

• Anti-Cheat Security Layer: fairness across all players.

• Monitoring and Logging: server uptime, latency, and crash reports.

Unlike a job portal, every millisecond counts.

Step 1: Starting Small

At first, one powerful server is enough to run both the game logic and user accounts. With just a few players, things run smoothly.

Step 2: More Players, More Problems

As millions of players log in, the single server crashes. To fix this, we:

• Add a Game Server Manager that spins up separate servers for each match.

• Introduce a load balancer that assigns players to available servers.

Step 3: Real-Time Data Handling

In gaming, speed is everything. Instead of slow HTTP, we switch to WebSockets or UDP for instant communication. To keep everyone’s game view in sync:

• Use in-memory databases like Redis for positions, scores, and health.

• Update leaderboards in near real time.

Step 4: Scaling Features

Other services run in parallel:

• Matchmaking service pairs players by skill, location, and latency.

• Economy service manages coins, rewards, and in-game items.

• Payment gateway handles subscriptions and purchases securely.

• Notification system sends updates like “new event starting.”

Step 5: Global Expansion and Security

When the game expands worldwide:

• Use a CDN to deliver maps and skins quickly to all regions.

• Add an Anti-Cheat layer to detect and block unfair play.

• Build an Admin and Monitoring panel to track system health and user behavior.

In gaming, system design focuses less on structured data and more on low latency, real-time communication, and fairness. Scaling here means keeping gameplay smooth and secure, even when millions of players join at once. Here is the image representation of the complete game platform system design

Why Both Case Studies Matter

You might wonder – why show two different systems instead of just one? The answer is that system design isn’t “one-size-fits-all.”

• The job portal teaches us how to scale structured, data-heavy applications where reliability and accuracy matter most.

• The gaming platform shows us how to design for speed, real-time communication, and fairness under extreme load.

Together, these examples prove that the same system design principles of scaling, caching, monitoring, and microservices apply everywhere. What changes is how you use them to solve the unique challenges of your platform.

Q&A

How to get into system design if you don’t understand anything (yet)?

I get this question all the time – and the first thing you need to know is that system design isn’t some separate, elite domain. It’s an additional skill that complements your development journey.

If you're a full-stack developer (or aiming to be one), learning system design gives you a huge edge. After all, building an app isn't just about making it work – it’s about making it work well at scale.

So if you’re just starting and don’t even know how to become a full-stack developer yet, start there. Learn to build applications first, and then system design will start making a lot more sense. Read this guide How to Become a Full-Stack Developer in 2025 (and Get a Job) – A Handbook for Beginners to learn how to become a full-stack developer.

How do you understand system design concepts?

The short answer: with time and consistent practice.

Think of it like this: if you know how to use a pencil, it’s up to you whether you use it to sketch or to write. The pencil is just a tool. Similarly, in system design, once you understand the core concepts, it’s about knowing when and where to apply them. The rest – frameworks, tools, and technologies – are just means to an end.

It’s not about memorising patterns, it’s about developing the instinct to use the right building blocks at the right time.

What tools should you know before diving into system design?

The truth is, the list keeps growing. New tools and platforms are constantly emerging. But in my experience, having a solid foundation in the following areas makes a huge difference:

• Full Stack Development – so you understand how both frontend and backend systems interact.

• Cloud Platforms (like AWS, GCP, or Azure) – because most modern systems are cloud-native.

• CI/CD Pipelines – for automating testing, integration, and deployment.

• Deployment Strategies – to know how to roll out new changes with minimal risk.

Mastering these gives you the technical muscle to design systems that are scalable, reliable, and production-ready. I am a frontend developer, why should I know the system design

What resources should I study to learn system design?

In my last article, I shared all the resources that helped me learn system design.

System design is crucial for building reliable, high-performance applications. I explored the following resources:

• Free GitHub system design repository

• Another free GitHub system design repository

• Free System Design Handbook

• Free Hands-on System Design Learning Platform

• Free Intro to System Design Blog

Case studies and real-world architectures can also help you understand large-scale systems. You can follow any big tech engineering blog (Uber has a great one).

For high-level concepts, I went through the Grokking System Design course. It’s a paid resource, and I used it to deepen my understanding of system design. It’s not mandatory, but it helped me think about architecture at scale.

Note: there are other sites and courses out there of course, but I only share what I have personally experienced and used, and I focus on FREE material first.

Where to practice system design

This is where real learning begins. Start by picking any existing application from the internet, just like I did. Google something specific, like “job application portal,” but avoid the results on the first page. Those apps are usually well-optimised and already follow best practices in system design.

Instead, dig deeper and explore results from the second or third page. Look for an app that seems to be in its early stages.

Once you find one, try to understand how the entire application works. Break it down into its core components and then imagine what would happen if that app started receiving 1 million users a day. You’ll naturally begin to see what system design elements are needed to handle that kind of load.

Final Notes

Learning system design becomes much easier when you’ve already built something. Let’s say you’ve created an app and now you're thinking about how to scale it – that’s where real learning begins. The moment you start writing down your requirements (like how your app should behave when it starts getting more traffic), you naturally begin to develop system-level thinking. It’s this process of planning and anticipating real-world usage that turns theory into a practical skill.

Conclusion

Full Stack + System Design = 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!

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 X: Prankur's Twitter

• Connect with me on LinkedIn: Prankur's LinkedIn

• Follow me on GitHub: Prankur’s Github

• View my Portfolio: Prankur's Portfolio

Well, I always say, "Wait for my next tutorial!"—and here it is! This guide will walk you through everything I did to become a Full Stack Developer and how you can use the same approach to turn any idea into a real product.

I've recommended this approach to many developers before writing this article, and they were amazed at the results. Now, it's your turn. 🚀

What We Will Cover

• Why Full Stack Development?

• What is Full Stack Development (Including DevOps)?

• DevOps for Full Stack Developers

• How to Learn Full Stack Development

• How to Use AI in Your Development

• Building Full-Stack Projects with AI

• How to Land a Full Stack Developer Job in 2025

• Q & A

• Final Notes

• Conclusion

Why Full Stack Development?

I chose Full Stack Development because my journey began with frontend development, and, over time, I found myself naturally transitioning into backend development.

When I first started, frontend development felt like an uphill battle. I was completely new to the space, and every concept seemed complex. But with patience and relentless practice, I reached a stage where I could take any design and turn it into functional code. Around that time, React was dominating the industry. It was trending, and once I grasped its core concepts, it became an intuitive and powerful tool in my arsenal.

As I gained confidence in frontend development, I started exploring more. Full Stack Development initially felt overwhelming, so I took it step by step. I focused on mastering frontend first, diving deep into the nuances of building intuitive and responsive interfaces. Over time, I worked on multiple projects—six practice projects and over twenty client projects—before I even considered backend development.

The turning point came when I became fascinated with APIs and databases. I wanted to understand how data flowed between the frontend and backend, how a single logic could control server behavior, and how each new function I added shaped the backend's response. It was challenging yet incredibly rewarding. I found joy in debugging, optimizing, and making everything work seamlessly together.

It was during my job search that I had a realization: companies weren’t just looking for frontend developers – they valued devs who could handle backend development as well. Having backend skills not only made me more competitive but also helped me refine my frontend capabilities.

That’s when I decided that I wouldn’t limit myself to one side of development. To build complete, production-ready applications, I committed to mastering both frontend and backend, ensuring I could create seamless, full-fledged digital experiences.

Now, let’s dive into the technical details so you can get there, too.

What is Full Stack Development (Including DevOps)?

When I first stepped into the world of coding, I was fascinated by how websites worked. Clicking a button, filling out a form, or watching animations unfold on a webpage felt almost magical.

But then, I had no idea about the complexity behind these interactions. I started with frontend development, where I learned how to design and build the visible part of applications—the user interface (UI) and user experience (UX).

The Frontend: Bringing Ideas to Life

Frontend development is all about what users see and interact with. It involves writing code to design layouts, animations, and interactive elements that create a seamless user experience. I started with HTML, CSS, and JavaScript, the foundational technologies of the web. But as I built more projects, I realized that modern frontend development had evolved far beyond basic web pages.

That’s when I discovered React.js—a JavaScript library that makes it easier to build dynamic, fast, and scalable web applications. Unlike traditional methods, React uses a component-based approach, where every part of the UI (buttons, forms, navigation bars) is reusable and managed efficiently.

After I learned React, I explored Next.js, a powerful framework built on React that enhances performance with features like server-side rendering (SSR) and static site generation (SSG), making applications load faster and helping them become more SEO-friendly.

To style my applications, I moved beyond traditional CSS and started using Tailwind CSS, a utility-first framework that allowed me to create beautiful designs without writing repetitive styles. Tailwind made my workflow more efficient, helping me focus on design without getting lost in excessive CSS files.

But frontend alone wasn’t enough. I wanted to understand what happened behind the scenes when I clicked a button or submitted a form. That curiosity led me to backend development.

The Backend: Powering the Logic Behind the Scenes

Backend development is the backbone of any application. It handles data storage, authentication, business logic, and communication with databases and APIs. My journey into backend development started with Node.js, a runtime that allows JavaScript to run on servers, making it possible to build full-fledged applications using a single programming language.

As I explored deeper, I discovered NestJS, a progressive Node.js framework that brings structure and scalability to backend development. Unlike traditional Node.js setups, NestJS follows an opinionated architecture inspired by Angular, making backend code more modular, reusable, and maintainable.

I also worked with tRPC, a modern framework that eliminates the need for REST APIs by providing a type-safe way for frontend and backend to communicate seamlessly. This reduced development time, improved security, and ensured fewer errors in data transmission.

For data storage, I experimented with different databases:

• MongoDB – A NoSQL database that stores data in JSON-like documents, making it flexible for handling unstructured or semi-structured data.

• PostgreSQL – A relational database system known for its robustness, performance, and ability to handle complex queries.

• Appwrite – A cloud-based solution offering real-time data synchronization, authentication, and serverless backend services, making it ideal for fast-moving applications. I used it on my mobile app project just to test out the backend as a service and I was impressed to see the outcome.

Working with databases helped me understand the importance of efficient data modeling and how backend services interact with the frontend. But my learning didn’t stop there—I wanted to go beyond development and dive into the world of deployment and cloud infrastructure.

DevOps & Cloud: Making Applications Scalable and Reliable

Building an application is one thing, but making sure it runs smoothly, scales under heavy traffic, and remains secure is another challenge. That’s where DevOps and cloud technologies come into play.

I learned about Docker, a containerization tool that allows applications to run in isolated environments, ensuring they work the same way regardless of where they are deployed. Then came Kubernetes, an orchestration system that automates the deployment and scaling of applications, making infrastructure management seamless.

To deploy and host my applications, I explored AWS (Amazon Web Services), which offers cloud computing solutions for hosting databases, servers, and entire applications with high availability and security. Understanding cloud platforms gave me the confidence to handle production-ready deployments, ensuring applications ran efficiently without downtime.

The Responsibilities of a Full Stack Developer

Looking back, the journey to Full Stack Development has been about taking ownership of the entire development lifecycle—from designing user interfaces to managing databases, optimizing performance, and deploying applications.

My role as a Full Stack Developer involves:

• Building intuitive and responsive user interfaces while ensuring seamless user experiences.

• Writing efficient backend logic to handle authentication, data processing, and API communication.

• Optimizing applications for performance, security, and scalability.

• Collaborating with teams to integrate features, fix bugs, and enhance usability.

• Keeping up with the latest technologies to continuously improve and stay ahead in the industry.

AI Integration: Pushing the Boundaries of Development

As AI started transforming the tech landscape, I became interested in integrating it into applications. I explored CopilotKit and LangChain, a framework that connects AI models with real-world applications, enabling features like chatbots, automated content generation, and intelligent decision-making. AI-powered applications fascinated me because they opened up endless possibilities—from predictive analytics to smart automation.

The Bigger Picture: Beyond Just Coding

Becoming a Full Stack Developer isn’t just about learning different technologies. It’s about problem-solving, system design, and coding best practices. I had to understand how all these pieces fit together—how the frontend communicates with the backend, how databases store and retrieve data, how servers process requests, and how everything is optimized for performance.

I also learned that software development is not a solo journey. Collaboration with designers, backend engineers, DevOps teams, and clients is crucial. Writing clean, maintainable code and following best practices like code reviews, documentation, and testing became second nature.

The beauty of Full Stack Development is that it’s ever-evolving. New frameworks, tools, and best practices emerge constantly, and adapting to change is what makes this field exciting. What started as a simple curiosity about how websites work has now turned into a passion for building complex, scalable, and intelligent applications.

Every project I take on brings new challenges and learning opportunities, and that’s what keeps me motivated.

Full Stack Development is about both coding as well as solving real-world problems, creating impactful digital experiences, and continuously pushing the boundaries of what’s possible.

DevOps for Full Stack Developers

When I first started as a developer, my focus was purely on writing code. I built web applications, ensured smooth user experiences, and worked with databases. But the more I progressed, the more I realized that development was only half the battle. The real challenge came when I had to deploy my applications, manage servers, and ensure everything ran smoothly in a production environment.

This is where DevOps changed everything for me.

Understanding DevOps

DevOps (a combination of Development + Operations) is a mindset that bridges the gap between developers and IT operations. It ensures that applications move smoothly from a developer’s local environment to a live server, running securely and efficiently.

Initially, I struggled with deployment. Writing code was one thing, but setting up servers, configuring environments, and handling cloud resources felt overwhelming. My first deployment experiences were frustrating—errors due to system differences, slow application performance, and unexpected crashes were common.

That’s when I realized I needed to master three essential DevOps concepts:

1. Linux – The backbone of servers

2. Cloud – The key to scalability

3. Docker – The game-changer for deployment

Linux: The Heart of Servers

Most of the internet runs on Linux—it’s the backbone of servers, cloud platforms, and infrastructure management. But when I started, I had barely touched a Linux terminal. Everything seemed cryptic—the command line was intimidating, and I often wondered why developers preferred it over a simple graphical interface.

Why Linux is Essential for DevOps

Unlike Windows or macOS, Linux offers stability, security, and efficiency, making it the preferred choice for cloud deployments. Learning Linux gave me complete control over my server environment, allowing me to:

• Manage files and directories efficiently using commands like ls, cd, and rm.

• Control system processes with ps, kill, and top to monitor resource usage.

• Automate tasks with shell scripting, reducing manual work.

• Secure my servers using SSH, firewalls, and user permissions.

Once I got comfortable with Linux, I could confidently set up and manage my own servers, eliminating deployment roadblocks. But managing a single server wasn’t enough—I needed a scalable, flexible environment for real-world applications. That’s where the cloud came in.

Cloud: Scaling Beyond a Single Server

Before I learned about cloud computing, I used to deploy my projects on shared hosting services. While they worked for small applications, they lacked scalability, control, and performance. As my applications grew, I needed a solution that could handle increased traffic, offer high availability, and support on-demand computing power.

Why Cloud Computing Changed Everything

Cloud platforms like AWS (Amazon Web Services), GCP (Google Cloud Platform), and Azure transformed the way I deployed applications. Unlike traditional hosting, cloud computing provided:

Scalability – Instantly add or reduce resources based on demand.
Cost-efficiency – Pay only for what you use, avoiding unnecessary expenses.
Global Availability – Deploy applications across multiple data centers for better performance.

Instead of worrying about physical servers, I could now launch virtual machines (EC2 on AWS, Compute Engine on GCP) to host applications, use managed databases (AWS RDS, Firebase, PostgreSQL on Azure) without setting up servers, and leverage serverless computing (AWS Lambda, Google Cloud Functions) for lightweight, event-driven applications.

With cloud expertise, I no longer feared deployment. I could confidently launch applications that scaled effortlessly, ensuring uptime and reliability. But I wasn’t done yet—there was one more challenge: ensuring consistent and fast deployments across different environments.

Docker: The Game-Changer for Deployment

Before I learned Docker, I faced a recurring issue: code that worked perfectly on my local machine often failed when deployed on a server. This happened because of differences in dependencies, configurations, and operating systems between development and production environments.

How Docker Fixed Deployment Issues

Docker solved this problem by introducing containerization. Instead of relying on system-specific settings, Docker allowed me to package my application, along with all its dependencies, into a single lightweight, portable container. This meant that the same container could run anywhere—on my laptop, a cloud server, or even inside Kubernetes clusters.

With Docker, I could:

• Package my app into a Docker image and ensure it worked identically across environments.

• Run multiple services seamlessly using Docker Compose (for example, a Node.js backend, a database, and a caching system like Redis—all in separate containers).

• Reduce deployment failures, since everything was pre-configured inside the container.

Once I mastered Docker, I no longer had to worry about "it works on my machine but not on the server" issues. It streamlined my workflow, making deployments faster, more secure, and more efficient.

The Impact of DevOps on My Full Stack Journey

Learning DevOps transformed me from just a developer into a deployment expert. Instead of only writing code, I could now also deploy applications with confidence using Linux servers, scale infrastructure efficiently with cloud computing, and ensure seamless deployments using Docker and containerization.

This not only made me a better Full Stack Developer but also opened doors to DevOps roles, giving me the flexibility to work across both development and infrastructure management.

A Never-Ending Learning Process

The world of DevOps is vast, and there’s always something new to learn:

• Kubernetes for container orchestration

• CI/CD pipelines for automated deployments

• Infrastructure as Code (Terraform, Ansible) for managing cloud resources effortlessly

But what I love most about DevOps is its impact—it turns ideas into live, scalable applications without friction. Whether I’m building a personal project or working on a high-traffic production system, DevOps ensures that my applications are not only well-built but also well-deployed.

For any developer looking to grow, DevOps is not optional—it’s essential. It’s the bridge between development and real-world execution, ensuring that the software we write doesn’t just run on our machines, but thrives in the real world.

How to Learn Full Stack Development

When I first started coding, I was overwhelmed by the sheer number of technologies out there. Where do you begin with HTML, CSS, JavaScript, backend frameworks, databases, DevOps? It felt like a mountain too big to climb. But as I broke it down into smaller steps and worked through them individually, everything started to make sense.

I’ve attached an image showcasing how I learned and experimented with various technologies. The tools mentioned in the image are specifically for those starting their journey from scratch, with no prior knowledge. That’s why I’ve omitted minor details. For example, if I mention React, it implies learning all its fundamental concepts, such as props, state management, and hooks.

Embarking on the journey to become a full stack developer can be both exciting and overwhelming. With many technologies to learn, it's essential to have a clear roadmap. This next part of the article will break down each component of this roadmap, explaining its importance and core concepts.

Frontend Development

Basics of Web Browsers

Understanding how web browsers work is fundamental to web development. Browsers like Chrome, Firefox, and Safari process HTML, CSS, and JavaScript to render web pages. Knowing their functionality helps in optimizing code for better performance, compatibility, and user experience.

Key Topics to Learn:

• How browsers parse and render HTML, CSS, and JavaScript

• Browser compatibility and developer tools

• Techniques for optimizing website performance

HTML – Structuring Web Content

HTML (HyperText Markup Language) is the backbone of every website. It defines the structure of web pages using elements like headings, paragraphs, lists, and links. Writing semantic HTML ensures accessibility and better SEO.

Important Concepts:

• HTML elements and attributes

• Forms and input validation

• Accessibility best practices (ARIA roles, semantic tags)

CSS – Styling Web Pages

CSS (Cascading Style Sheets) controls the appearance of web pages, including layout, colors, fonts, and responsiveness. Using modern CSS techniques can improve design consistency and reduce development time.

Key Topics to Learn:

• Media Queries: Adjusting layouts based on screen size

• Flexbox,Grid & Box Model: Efficiently structuring page layouts

• CSS Frameworks (Tailwind CSS): Speeding up development with utility-first styling

JavaScript – Adding Interactivity

JavaScript is the scripting language that makes web pages dynamic. It enables interactive elements such as animations, forms, and real-time updates.

Core Concepts:

• DOM (Document Object Model) manipulation

• Event handling (clicks, keyboard inputs, hover effects)

• Asynchronous programming (Variables, Functions, Promises, async/await, fetch requests)

I’ve shared the important things to learn in another guide, where I have built a moderate level front end project: How to Build a CSS Component Library and Improve Your Web Development Skills

You can also check out freeCodeCamp’s new beta Certified Full Stack Developer curriculum. It’s a completely reworked version of the curriculum that covers everything from HTML, CSS, and JavaScript to databases, Node.js, Python, and more.

React – Building UI Components

React is a JavaScript library for creating interactive and efficient user interfaces. It uses a component-based architecture, allowing for reusable and maintainable code.

Learning React offers several advantages. It promotes component-based development, which leads to better code organization and reusability. React also provides robust state management through hooks and the context API, making it easier to manage application state.

Also, React's use of the virtual DOM ensures fast rendering, enhancing the performance of web applications.

Here’s a popular course that’ll teach you all the React fundamentals you need to know to get started. And this handbook will help reinforce these key React concepts.

Tailwind CSS – Responsive UI Development

Tailwind CSS is a utility-first CSS framework that simplifies styling by providing prebuilt classes. It allows rapid development without writing custom CSS from scratch.

To effectively learn and utilize Tailwind CSS, it's important to grasp several key concepts. Start with the basics of CSS3 to understand the foundational principles of styling web pages. Next, delve into Tailwind configuration to learn how to set up and customize the framework according to your project's needs.

Tailwind CSS offers several key features that make it a powerful tool for web development. It provides a wide range of utility classes for spacing, typography, and colors, allowing for quick and efficient styling.

Tailwind also supports responsive design with built-in breakpoints, ensuring your web pages look great on all devices. Customization is another strong point, as you can tailor the framework to your specific requirements through the Tailwind configuration file.

In this course, you’ll learn Tailwind basics by building a responsive product card project.

Performance Testing – Optimizing Web Applications

Ensuring smooth performance is essential for user experience. Performance testing tools help identify bottlenecks and improve page speed.

Tools to Use:

• Lighthouse: Analyzes performance, accessibility, and SEO

• WebPageTest: Tests load time and page rendering speed

• Chrome DevTools: Debugs slow-loading elements and scripts

Next.js – Advanced React Framework

Next.js is a powerful React framework that enhances web applications with several key features. It supports server-side rendering (SSR), which improves SEO and performance by pre-rendering pages on the server.

Also, Next.js offers static site generation (SSG), allowing pages to be generated at build time and served as static HTML files for faster loading times.

Next.js also includes API routes to handle backend functionality, making it a full-stack framework. The framework simplifies routing with its file-based routing system, eliminating the need for complex configurations.

In addition to all this, Next.js provides automatic code splitting, which optimizes performance by breaking JavaScript code into smaller chunks. It also supports image optimization with features like lazy loading and automatic generation of responsive image sets, enhancing performance and user experience.

Next.js is built on the latest React features and is designed to scale, making it a popular choice among leading companies for building dynamic and performant web applications.

Here are a couple courses to help you learn all about Next.js and how to build projects with it:

• Learn Next.js by building a cloud photo app

• Build scalable web apps with Next.js

Projects – Applying Knowledge in Real-World Applications

Building projects is the best way to strengthen frontend development skills. Working on real-world applications helps integrate different technologies and improve problem-solving abilities.

Project Ideas:

• Weather App: Fetches and displays real-time weather data using an API.

• Chat App: Implements real-time messaging using WebSockets.

• Task Manager: Uses drag-and-drop functionality to manage tasks dynamically.

Backend Development

Advanced JavaScript – Core Concepts for Backend Development

Before diving into backend technologies, it is crucial to have a solid grasp of JavaScript. Several important concepts are fundamental to mastering this language.

Closures are a vital concept in JavaScript. A closure allows a function to remember and access variables from its outer scope, even after the function has finished executing. This capability is particularly useful for maintaining data privacy and managing state within applications.

Promises are another essential concept. A promise is a JavaScript object that represents the eventual completion or failure of an asynchronous operation. Promises are instrumental in managing tasks such as fetching data from a database without blocking the execution of other tasks, ensuring smoother and more efficient application performance.

Async/Await is a more modern and readable way to handle promises. It allows developers to write asynchronous code in a manner that resembles traditional synchronous code, making it easier to understand and maintain.

Key topics to focus on include understanding the JavaScript event loop and execution context, which are fundamental to how JavaScript manages and executes code. Also, learning to handle asynchronous operations effectively and implementing error handling using try/catch in asynchronous functions are crucial skills for any JavaScript developer.

Revision – Staying Up to Date with Backend Concepts

Technology evolves rapidly, and regularly reviewing what you have learned is essential to reinforce key concepts. One of the most important areas to revisit is APIs (Application Programming Interfaces), which facilitate communication between different parts of an application.

Understanding REST APIs is crucial. REST (Representational State Transfer) APIs follow a standard set of rules for communication between the frontend and backend using HTTP methods.

• The GET method is used to retrieve data from the server, such as loading user profiles.

• The POST method sends new data to the server, like creating a new account.

• The PUT method updates existing data on the server, for example, editing a profile.

• The DELETE method removes data from the server, such as deleting a user or post.

Key topics to learn include designing RESTful APIs, handling API requests and responses, and understanding request headers, body, and status codes. These skills are fundamental for effective communication between different components of an application.

Node.js – Running JavaScript on the Server

JavaScript is commonly used in web browsers, but Node.js extends its capabilities by allowing it to run on a server, enabling the development of backend applications.

Node.js is a powerful choice for several reasons. Built on the V8 JavaScript engine, it ensures fast and efficient performance. Additionally, Node.js employs a non-blocking I/O model, which allows it to handle multiple requests simultaneously without slowing down the server.

This makes it particularly well-suited for applications that require real-time interactions. Furthermore, Node.js is lightweight and highly scalable, further enhancing its suitability for such applications.

Key topics to learn include understanding the event-driven architecture of Node.js, which is fundamental to its operation. Additionally, becoming proficient with npm (Node Package Manager) is essential for installing and managing libraries. Working with built-in modules like fs (file system) and http is also crucial for leveraging Node.js's capabilities effectively. Here’s a course on Node.js + Express to get you started.

Express.js – Simplifying Backend Development

Node.js provides core functionality, but setting up a web server manually can be complex. Express.js is a web framework that simplifies this process.

Express.js offers several key features that make web development more efficient. One of these features is routing, which defines how different API endpoints handle requests. For example, a GET request to /users might retrieve a list of users, while a POST request to /login could handle user login. This routing mechanism helps organize and manage the various endpoints in an application.

Another important feature of Express.js is middleware. Middleware functions process requests before they reach the backend logic. This can include tasks such as authentication, where the middleware checks if a user is logged in before allowing access to certain routes. Logging is another common use of middleware, where it records details about each request for monitoring and debugging purposes.

Express.js also provides robust error handling capabilities. It catches and manages errors, ensuring that the application runs smoothly even when issues arise. This is crucial for maintaining a good user experience and for debugging during development.

Express.js is commonly used for various tasks in web development. One of its primary uses is user authentication, which involves handling login and registration processes. This ensures that only authorized users can access certain parts of the application.

Another common use is storing and retrieving data from a database. Express.js can interact with databases to perform CRUD operations (Create, Read, Update, Delete), making it easier to manage data within the application.

Also, Express.js is often used for handling file uploads and user-generated content. This can include processing images, documents, or other files that users upload to the application. By simplifying these tasks, Express.js helps developers build robust and efficient web applications.

Security in Backend Development
To protect user data, there are various security mechanisms you can implement. One effective method is using JWTs, or JSON Web Tokens, which is a token-based authentication system. JWTs allow users to be securely verified without requiring them to log in repeatedly. This is particularly useful for maintaining user sessions and ensuring that only authenticated users can access certain parts of an application.

Another important security mechanism is OAuth. OAuth enables users to log in via third-party services such as Google or GitHub without needing to create a separate account for the application. This not only simplifies the login process for users but also enhances security by leveraging the authentication systems of trusted providers.

Encryption and hashing are crucial methods for protecting sensitive data. Before storing data such as passwords in a database, it should be encrypted or hashed. Encryption transforms the data into an unreadable format that can only be decrypted with a specific key, while hashing converts the data into a fixed-size string of characters that cannot be reversed. These techniques ensure that even if the database is compromised, the sensitive data remains secure.

When learning to implement these security mechanisms, there are several key topics to focus on. One essential topic is creating and managing APIs with Express.js. Express.js is a powerful framework for building web applications and APIs in Node.js. Understanding how to create and manage APIs with Express.js is fundamental for developing robust and scalable applications.

Implementing authentication and authorization is another critical topic. Authentication involves verifying the identity of users, while authorization determines what actions they are permitted to perform. By implementing these mechanisms, you can control access to different parts of your application and ensure that only authorized users can perform specific actions. Here’s a more detailed comparison of authentication vs authorization if you want to dive deeper.

Using middleware for logging and request validation is also important. Middleware functions in Express.js can process requests before they reach the main application logic. Logging middleware can record details about each request, which is useful for monitoring and debugging. Request validation middleware can ensure that incoming requests meet certain criteria, such as containing required fields or adhering to specific formats. This helps in maintaining the integrity and security of the application.

Databases – Storing and Managing Data

Databases are essential for storing and organizing application data. There are two main types of databases: NoSQL and SQL.

MongoDB is a popular NoSQL database that stores data in flexible, JSON-like documents. This structure makes it ideal for applications with dynamic or unstructured data, where the data format may change over time. MongoDB is known for its ability to scale easily, handling large amounts of data efficiently. This makes it a good choice for applications that need to manage a lot of data or require high performance.

On the other hand, SQL databases like MySQL and PostgreSQL use structured tables with predefined schemas. These databases are best suited for applications that require complex relationships between data, such as financial transactions or e-commerce platforms. The structured nature of SQL databases ensures data integrity and supports complex queries.

When working with databases, it's important to understand how to choose between SQL and NoSQL based on the specific needs of your project. Each type of database has its strengths and is better suited for certain types of applications.

For example, if your application deals with a lot of unstructured data or requires high scalability, MongoDB might be the better choice. But if your application needs to manage complex data relationships and ensure data integrity, an SQL database like MySQL or PostgreSQL would be more appropriate.

Another key topic to learn is writing database queries to insert, update, and retrieve data. Whether you're using a NoSQL database like MongoDB or an SQL database, you'll need to know how to interact with the database to perform these operations. This involves understanding the query language used by the database and how to structure your queries to get the data you need.

It's also important to know how to connect a Node.js application to a database. Node.js is a popular runtime environment for building server-side applications, and being able to connect it to a database is crucial for managing application data. This involves setting up the necessary database drivers and configuring your application to communicate with the database. You’ll learn about this in this in-depth tutorial.

By mastering these topics, you'll be able to build robust and efficient applications that can handle a wide range of data management needs. This article puts into practice many of the concepts we’ve discussed so far that relate to backend security, so give it a read.

CORS – Managing Cross-Origin Requests

CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers to control how resources on a web page can be requested from another domain outside the domain from which the resource originated. This mechanism is crucial for preventing unauthorized access to sensitive data while allowing legitimate cross-origin requests.

How Browsers Enforce CORS Policies

Browsers enforce CORS policies through a set of HTTP headers that dictate whether a request from one origin (domain) should be permitted to access resources from another origin.

When a web page makes a cross-origin request, the browser first sends a preflight request using the HTTP OPTIONS method to check if the actual request is allowed. The server responds with appropriate CORS headers, such as Access-Control-Allow-Origin, which specifies the permitted origins. If the server allows the request, the browser proceeds with the actual request – otherwise, it blocks the request.

Configuring CORS in Express.js Applications

To configure CORS in an Express.js application, you can use the cors middleware. This middleware allows you to specify which origins are permitted to access your API, which HTTP methods are allowed, and other CORS-related settings. Here's a basic example of how to set up CORS in an Express.js application:

const express = require('express');
const cors = require('cors');
const app = express();

// Use the cors middleware with default settings
app.use(cors());

// Or configure it with specific options
app.use(cors({
  origin: 'http://example.com',
  methods: 'GET,POST',
  allowedHeaders: 'Content-Type,Authorization'
}));

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

In this example, the cors middleware is used to enable CORS for all routes in the Express.js application. You can customize the origin, methods, and allowed headers to fit your application's requirements.

Importance of Proper CORS Configuration

Proper CORS configuration is essential to maintain the security of your web application. Allowing all origins or using overly permissive CORS settings can expose your application to security vulnerabilities, such as cross-site request forgery (CSRF) attacks. It's important to specify only the trusted origins and limit the allowed methods and headers to what is necessary for your application to function properly.

.env Files – Managing Sensitive Data

Sensitive information such as database credentials and API keys should not be hardcoded in the codebase. Instead, they are stored in .env (environment) files.

Example of a .env file:

DATABASE_URL=mongodb://username:password@server SECRET_KEY=mysecurekey

This ensures security and flexibility when deploying applications.

Key Topics to Learn:

• Using environment variables in Node.js applications

• Keeping sensitive data secure in production environments

HTTP Status Codes – Understanding Server Responses

Every API request returns an HTTP status code that indicates whether the request was successful or encountered an issue. These status codes are crucial for understanding the outcome of an API call and for debugging any issues that may arise.

Common HTTP Status Codes

The 200 OK status code indicates that the request was successful. It is the standard response for successful HTTP requests, meaning the requested resource was found and processed correctly. For example, when fetching a list of users from a database, if the data is retrieved without any issues, the server responds with a 200 OK.

The 400 Bad Request status code means the client sent an invalid request. This occurs when the server cannot understand the request due to incorrect syntax, malformed request structure, or deceptive routing. An example of this would be sending a JSON payload to an API that expects XML, causing the server to reject the request with a 400 response.

The 401 Unauthorized status code signals that authentication is required. It is returned when a request lacks valid authentication credentials or when provided credentials are incorrect. A common example is attempting to access a protected resource without logging in or supplying an invalid API key.

The 403 Forbidden status code indicates that the client does not have permission to access the requested resource. While the server understands the request, it refuses to authorize it due to insufficient permissions or access restrictions. For instance, trying to delete a resource without the necessary privileges would result in a 403 Forbidden response.

The 404 Not Found status code is returned when the requested resource does not exist. This could be because the resource has been moved, deleted, or the URL is incorrect. A typical example is attempting to access a user profile that does not exist in the database.

The 500 Internal Server Error status code indicates that something went wrong on the backend. It is a generic error response when the server encounters an unexpected condition that prevents it from processing the request. This could be due to a database connection failure or a bug in the server-side code.

Key Topics to Learn

Handling different HTTP status codes in API responses is crucial for building robust and user-friendly APIs. Each status code provides insight into the outcome of a request, and proper handling ensures better reliability and usability.

In an API, checking the response status and acting accordingly is essential. For example, receiving a 401 status code should prompt the user to log in again, while a 500 status code might require displaying a user-friendly error message and logging the error for debugging.

Implementing error handling in Express.js applications is essential for maintaining stability and security. Proper error handling helps in identifying and resolving issues quickly, leading to a better user experience.

In Express.js, you can use middleware to handle errors globally. A custom error-handling middleware can catch errors and send appropriate responses to the client. Also, built-in error-handling functions can manage specific errors, such as validation failures or database errors.

Testing – Ensuring Code Reliability

Testing helps catch errors before they affect users. There are different types of tests. Unit tests check individual functions and components to ensure they work as expected. Integration tests verify that different parts of the application work together correctly. Popular testing tools include Jest and Mocha, which automate tests and improve code quality.

Key topics to learn include writing automated tests for backend applications and setting up a testing environment with Jest or Mocha.

Building Real-World Projects

The best way to solidify backend knowledge is by working on real projects. Some ideas include:

• Note-Taking App: Allows users to create, edit, and delete notes with authentication.

• E-Commerce Website: Manages product listings, shopping carts, and checkout processes.

• Social Media Platform: Implements features like user profiles, posts, comments, and real-time messaging.

Building these projects will help integrate everything you have learned and prepare you for real-world applications.

Key Topics to Learn:

• Combining frontend and backend for full-stack applications

• Deploying backend applications to cloud platforms

• Using system design to scale the apps

• Implement security best practices

Additional Notes

DSA (Data Structures and Algorithms)

While optional, a solid understanding of DSA can significantly improve your problem-solving skills and make you a more competent developer.

Data structures like arrays, linked lists, stacks, queues, trees, and graphs are fundamental to organizing and managing data efficiently. Algorithms, on the other hand, provide systematic methods for solving complex problems.

Mastering DSA enables you to write optimized code, enhance application performance, and tackle challenging programming tasks. It also prepares you for technical interviews, where DSA questions are commonly asked.

By practicing problems on platforms like LeetCode, HackerRank, and GeeksforGeeks, you can strengthen your analytical skills and become proficient in various algorithmic techniques.

System Design

Basic knowledge of system design is a must. It helps you understand how to architect scalable and efficient systems, a critical skill for any full stack developer. System design involves designing the architecture of a software system, considering factors such as scalability, reliability, maintainability, and performance.

It includes understanding how different components of a system interact, how data flows between them, and how to handle failures and bottlenecks. Familiarity with design patterns, database design, caching strategies, and load balancing techniques is essential.

By studying system design principles and practicing with real-world examples, you can learn to build robust and efficient systems that can handle large-scale traffic and data processing requirements.

Real-World Projects

Finally, make sure to build at least five projects that solve real-world problems. Integrating full stack skills, including DevOps, will give you a comprehensive understanding and make you job-ready. Working on real-world projects allows you to apply your knowledge in practical scenarios, gain hands-on experience, and build a strong portfolio.

Choose projects that cover various domains such as e-commerce platforms, social media applications, content management systems, or data analytics dashboards. Incorporate technologies like React, Node.js, Django, and cloud services to demonstrate your versatility.

You should also document your projects well, including the challenges you faced and how you overcame them. This not only showcases your technical skills but also your problem-solving abilities and attention to detail.

By following this toolkit and continuously practicing, you'll be well on your way to becoming a proficient full stack developer. Happy coding!

How to Use AI in Your Development

AI is revolutionizing the way Full Stack developers build, test, and maintain applications. By integrating AI-powered tools, you can speed up your workflows, reduce manual effort, and focus on solving more complex problems.

By embracing AI in responsible and effective ways, you’ll gain a significant advantage in terms of efficiency, productivity, and innovation.

Here’s how AI can be a game-changer in your development process:

1. Automate Repetitive Coding Tasks

Writing boilerplate code, setting up configurations, or refactoring repetitive logic can take up valuable time. AI tools like GitHub Copilot, ChatGPT, and Tabnine can:

• Auto-generate function templates and commonly used patterns.

• Suggest code completions based on context.

• Convert pseudocode or plain-language descriptions into working code.

• Speed up debugging by analyzing errors and suggesting fixes.

2. Enhance Project Development

AI can assist throughout the entire development lifecycle, from ideation to deployment.

AI tools can help you optimize your code by analyzing performance bottlenecks and suggesting improvements. It can also automatically generate meaningful documentation based on your code’s structure.

You can use AI to create optimized database schemas based on use your cases, and tools like Galileo AI can help you generate UI components from sketches or text descriptions.

3. AI-Driven Testing Tools

Manually testing applications can be time-consuming, but AI can make the process smarter and more efficient.

First of all, AI can automatically create unit, integration, and functional tests with high coverage. Machine learning models can also identify potential vulnerabilities or bugs before they cause issues. And AI can update test cases when UI changes occur, reducing maintenance effort in automated testing.

4. Integrate AI Models for Smart Features

You can embed AI directly into your applications to create more intelligent user experiences. There are many potential use cases, including:

• Chatbots and virtual assistants – AI-powered chatbots (like ChatGPT API) can handle customer support and user queries.

• Recommendation systems – Machine learning models can suggest relevant products, movies, or content based on user behavior.

• Predictive analytics – AI can analyze historical data to forecast trends, optimize inventory, or improve decision-making.

Here’s a course that’ll teach you the basics of using AI tools like ChatGPT in your development process.

When Not to Use AI in Development

While AI is powerful, it’s not always the best solution. There are various cases where avoiding AI makes sense.

First, not every project needs AI, and it can introduce unnecessary complexity. Simple CRUD apps (Create, Read, Update, Delete) can be built efficiently with standard programming techniques. Over-engineering with AI may add unnecessary dependencies and slow down development.

Also, AI-generated code can increase maintenance overhead. It can sometimes be unpredictable or difficult to debug. If the AI-written code is too complex, maintaining or scaling the project can become a nightmare.

Another important thing to consider is whether your application deals with sensitive user data (like healthcare, banking, or legal records). In these cases, AI-generated solutions may introduce security risks. Always ensure AI tools comply with data protection regulations like GDPR or HIPAA.

And finally, while AI is a helpful assistant, it’s not a replacement for your own deep, experience-based coding knowledge. Relying too much on AI without understanding the logic behind the code can lead to poor decision-making and hard-to-fix errors.

Building Full Stack Projects with AI

These project ideas are meant to inspire, not dictate, your learning path. Explore any concepts that excite you – just make sure that your project aligns with the following principles:

First, make sure your project solves real-world problems. Focus on practical applications rather than just theoretical exercises. Your project should aim to improve efficiency, accessibility, or automation in a meaningful way.

Your project should also be as unique as possible (and not just a clone of someone else’s project). Avoid directly copying existing platforms like Netflix, Twitter, or Spotify. Instead, add an innovative twist, such as AI-powered recommendations, smart automation, or predictive analytics.

Next, make sure you follow best coding practices. Write clean, maintainable, and well-documented code. Implement security measures, proper error handling, and optimized database queries.

And don’t forget about scalability and performance. Design your architecture to handle growth efficiently. Use microservices, caching, and cloud-based solutions to ensure smooth scalability.

Lastly, don’t just add AI for the sake of it. Ensure AI enhances the user experience or automates a meaningful task (for example, AI-powered chatbots, sentiment analysis, or personalized recommendations).

Here’s a course that teaches you how to build an AI-powered chat application using the MERN stack.

Do’s and Don’ts for AI-Powered Full Stack Projects

✅ What to Do:

• Think beyond CRUD apps – Move past basic Create, Read, Update, Delete operations and integrate advanced features like real-time collaboration, AI-driven insights, or automation.

• Focus on user experience (UX) – Ensure your application is intuitive, accessible, and mobile-friendly.

• Use the right tech stack – Choose frameworks and tools based on project requirements, not just hype. Example: Next.js for SSR, FastAPI for AI-powered APIs, MongoDB for flexible data handling.

• Prioritize security – Implement authentication, authorization, rate limiting, and data encryption to protect users and their data.

• Optimize AI performance – If using AI, ensure your models are efficient, lightweight, and scalable. Consider deploying them using ONNX, TensorFlow.js, or cloud-based inference services.

❌ What Not to Do:

• Avoid over-engineering – Don’t use complex tech stacks unnecessarily. Just keep it simple, modular, and efficient.

• Don’t only make another To-Do app – Focus on projects with real impact rather than generic exercises.

• Avoid AI gimmicks – Adding AI without a clear purpose leads to unnecessary complexity. Ensure it enhances functionality.

• Don’t ignore performance – Poorly optimized AI or backend logic can slow down the user experience. Use caching (Redis), indexing, and pagination where needed.

• Avoid hardcoding everything – Make your application dynamic so that users can customize their experience rather than relying on static configurations.

How to Land a Full Stack Developer Job in 2025

You’ve learned full-stack development, one of the most in-demand tech skills. Now, it’s time to take the next step and land high-value job opportunities. Here’s exactly what I did to become an MVP Developer for web and mobile applications.

Build a Strong Portfolio

Your portfolio is your first impression in the tech world. It’s not just a collection of projects—it’s proof of your skills, creativity, and ability to solve real problems.

A well-structured portfolio should be simple, clean, and easy to navigate. Instead of listing generic projects, focus on AI-powered applications that highlight your expertise in building intelligent solutions.

A strong portfolio should include:

• AI-powered projects: Showcasing AI-driven applications like chatbots, recommendation systems, or automation tools can make your profile stand out.

• Live links: Recruiters and potential employers should be able to see your work in action. Hosting your projects online adds credibility.

• Well-organized GitHub repositories: Write clean, well-documented code with clear instructions in the README file. Think of it as a mini case study explaining what the project does, why you built it, and how someone else can use or contribute to it.

Here’s a handbook that shares a whole lot of tips and strategies for creating a great portfolio. Here’s a fun tutorial that walks you through building your own interactive terminal-style portfolio page. And in this course, you’ll learn how to build a portfolio that looks like a 2D game. As you can see, you can really have a good time with this.

Where Can You Host Your Portfolio for Free?

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:

• Vercel – Best for Next.js projects, offering seamless deployment.

• GitHub Pages – Great for hosting static websites and personal portfolios.

• Netlify – Ideal for frontend-heavy projects with easy deployment and CI/CD integration.

Craft a Résumé That Grabs Attention

Your résumé is a snapshot of your technical skills, projects, and achievements. Keep it concise, to the point, and well-structured to make it easy for recruiters to scan. Avoid unnecessary fluff and focus on real experience.

Key elements of a strong résumé:

• Highlight real projects: Avoid listing fake or irrelevant experiences. Recruiters value practical, hands-on experience over theoretical knowledge.

• Use bullet points: Résumés often go through an ATS (Applicant Tracking System). Structuring information in bullet points improves readability and increases the chances of passing initial screenings.

• Essential sections: Include Skills, Projects, Experience, Education, and Certifications.

• Keep it to one page: Unless you have extensive industry experience, a single-page résumé is best.

Optimize LinkedIn, GitHub, and Twitter (X) to Build Your Presence

Your online presence is just as important as your résumé. Recruiters often check social media to understand your work and contributions. Optimize your profiles to reflect your skills and showcase your work.

LinkedIn: A well-crafted LinkedIn profile is your digital business card. It should include:

• A strong headline (like "Full-Stack Developer | AI-Powered Web & Mobile Apps").

• A detailed About section explaining your skills, experiences, and projects.

• Regular posts sharing insights, projects, and engagement in tech communities.

GitHub: Your GitHub profile should reflect your coding abilities. Here’s how to make it stand out:

• Pin your best projects to give visitors an immediate sense of your work.

• Write detailed README files with project explanations, installation guides, and use cases. Treat it like a case study to show why and how you built the project.

Twitter (X): Engaging in tech discussions can help you connect with industry professionals. Follow developers, share your work, and contribute to ongoing conversations in your field.

Other Platforms to Showcase Your Knowledge:

• freeCodeCamp – Write advanced coding tutorials and technical blogs, get active on the forum, or contribute to the open-source codebase.

• Dev.to – Share coding insights and build credibility.

• Hashnode – A developer-focused blogging platform to showcase your learning journey.

Contribute to Open Source to Build Credibility

Open-source contributions demonstrate your ability to work in real-world software development environments. It shows you can collaborate with others, write maintainable code, and follow best practices.

How to start:

1. Find a project you’re interested in and start small—fix bugs, update documentation, or improve existing features.

2. Use platforms like:

   • GitHub – Explore trending repositories and contribute.

   • Up For Grabs – Discover beginner-friendly open-source projects.

   • First Timers Only – Great for first-time contributors who want guidance.

Even small contributions can make a big impact on your resume and portfolio. Here’s a guide that’ll help you get started. And here’s a whole handbook that goes into great detail on the process of contributing to open source projects.

Smart Job Hunting: Stand Out from the Crowd

Most job seekers flood high-traffic platforms like LinkedIn Jobs and Indeed, making competition fierce. Instead of competing with thousands of applicants, target platforms where the competition is lower but opportunities are still high.

Lesser-Known Job Platforms for Developers

• Wellfound (formerly AngelList Talent) – Best for startup jobs.

• GiniTalent – Excellent level of job matching.

• Himalayas – Remote tech jobs.

• Turing – Exclusive global remote roles.

• Lemon.io – For top-rated freelance developers.

• Arc.dev – High-paying remote jobs for experienced devs.

Since these platforms have a smaller user base, they increase your chances of getting noticed compared to saturated job boards with millions of applicants.

By taking a strategic approach to job applications, optimizing your online presence, and building an impressive portfolio, you can significantly improve your chances of landing a great job in tech.

Here’s a full book by freeCodeCamp’s founder Quincy Larson on how to Learn to Code and Get a Developer Job.

Final Thoughts: Stand Out, Be Proactive, and Keep Learning

• Keep your portfolio and GitHub updated with new projects.

• Stay active on LinkedIn & Twitter—your next job might come from networking.

• Contribute to open-source to gain credibility.

• Apply strategically—don’t just spam resumes; focus on quality applications.

👉 You have the skills. Now, position yourself where opportunities find you! 🔥

Resources I followed to become a full stack developer

My approach to learning has always been practical and project-driven. Before diving into any new technology, I first determine what I can build with it. This not only keeps me motivated but also ensures I focus on the most relevant concepts.

Once I have a project idea, I research the essential technologies that will help bring it to life. Instead of getting lost in endless tutorials, I look for structured learning resources that provide hands-on practice. freeCodeCamp was instrumental in strengthening my frontend skills, particularly in JavaScript and React.

For backend development, I explored interactive learning platforms and official documentation to understand how databases, authentication, and APIs work. When I started learning system design, I realized it required a different way of thinking—focusing on scalability, performance, and reliability. Studying real-world architectures and large-scale applications helped me connect the dots between different technologies.

Go-To Resources for Core Web Technologies

I prefer text-based learning as it allows me to absorb concepts at my own pace. Some of the best resources I used include:

Frontend Development:

• freeCodeCamp – Hands-on projects with structured lessons.

• MDN Docs – The official reference for web technologies.

• JavaScript.info – A deep dive into JavaScript concepts.

• Learn to code - learning Python or JavaScript by building small projects

Backend Development:

• Node.js and Express.js Documentation – Essential for mastering server-side JavaScript.

• MongoDB University – Practical NoSQL database tutorials.

DevOps & System Design:

Unlike traditional development, DevOps is about automating workflows, improving collaboration, and ensuring seamless deployments. It involves different stacks, but I focused on the essentials—Docker, cloud services, and Linux fundamentals—to streamline my development process.

• Docker: I started with Docker 101 (official Docker guide) to containerize applications.

• Cloud Services: I used AWS documentation (EC2) to deploy and scale backend services.

• Linux: Since Linux is fundamental in DevOps, I relied on Linux Journey and various open-source tools to strengthen my command-line skills. Though I’ve used Linux for 8 years, structured learning helped refine my workflow and automation techniques.

System Design: Understanding How Scalable Systems Work

System design is crucial for building reliable, high-performance applications. I explored:

• Free GitHub system design repositories to grasp the fundamentals.

• Case studies & real-world architectures to understand large-scale systems, you can follow any big tech engineering blog, I prefer Uber blogs.

• For high-level concepts, I went through the Grokking System Design course. It’s a paid resource and I used it to deepen my understanding of system design. It’s not mandatory, but it helped me think about architecture at scale.

By combining hands-on practice with real-world case studies, I built a strong foundation in both DevOps and system design, making my applications not just functional but also scalable and production-ready. Some important things to know about JS

• JS Clean code

• JS Advance concepts

The DSA Grind: A Realistic Approach for Frontend & Full-Stack Developers

Let’s be honest—Data Structures and Algorithms (DSA) can feel overwhelming, especially if your main focus is building real-world applications. Many developers struggle to stay consistent with DSA practice, and I was no exception. I’ve tried multiple times to push myself into it, only to abandon it within minutes.

But while DSA may not be the most exciting part of development, it’s still essential for technical interviews, especially at mid-to-large companies. The good news? You don’t need to master every single topic—focusing on a few key concepts is often enough to clear most frontend and full-stack coding rounds.

DSA Grind

If you’re a frontend or full-stack developer, you should focus on problem-solving techniques that align with real-world applications. These are the core topics that come up frequently in coding interviews:

Arrays form the foundation of data structure and algorithm problems. Efficient manipulation of arrays is essential, especially in frontend-focused roles where handling lists of data is common. Important concepts include sorting techniques such as Merge Sort and Quick Sort, searching methods like Binary Search and the Two-Pointer Approach, and optimization strategies such as the Sliding Window Technique. Kadane’s Algorithm is useful for finding the maximum subarray sum, while Prefix Sum and Difference Arrays are beneficial for solving range query problems.

String manipulation plays a crucial role in UI-driven applications and backend parsing. Many real-world problems require processing and transforming text data. Key concepts include string reversal and rotation, pattern matching techniques like the KMP Algorithm and Rabin-Karp, and working with anagrams and palindromes. String compression and encoding techniques help with data optimization, while the Trie data structure is widely used for applications like autocomplete and spell checkers.

Objects and hash tables are fundamental in JavaScript due to its object-based structure. These structures are critical for efficient lookups and caching. Essential topics include understanding the differences between hash maps and hash sets, handling collisions through chaining or open addressing, and implementing an LRU cache. Frequency counting is a useful technique for optimization problems, and graph adjacency lists are important for advanced system design concepts.

Linked lists, though less common in frontend development, frequently appear in coding interviews due to their recursive nature and memory efficiency. Key topics include the differences between singly and doubly linked lists, the Fast & Slow Pointer Technique for cycle detection, and merging two sorted linked lists. Reversing a linked list is a classic problem that can be solved using both iterative and recursive approaches. The LRU cache implementation combines linked lists and hash maps to enable efficient data retrieval.

Stacks and queues are widely used in both frontend and backend applications. They are essential for features like undo/redo functionality and request handling. Important concepts include implementing stacks using arrays or linked lists, validating balanced parentheses for tasks like HTML tag matching and JSON validation, and designing Min/Max stacks for constant-time retrieval of minimum or maximum values. Queue and deque implementations, along with priority queues based on heaps, are valuable for solving scheduling and task management problems.

Trees and graphs, while not part of daily frontend tasks, play a crucial role in advanced full-stack and system design interviews. Binary Search Trees help optimize database queries, while Depth-First Search (DFS) and Breadth-First Search (BFS) are fundamental traversal techniques. Tries are commonly used for search and autocomplete functionalities. Graph traversal techniques are crucial for building recommendation engines and social networks, and Dijkstra’s Algorithm is widely used for shortest path calculations in routing systems.

Advanced JavaScript Topics for Full-Stack Interviews

Beyond data structures and algorithms, modern technical interviews emphasize JavaScript’s core mechanics and advanced concepts. A strong grasp of these topics is essential for full-stack roles, ensuring you can write efficient, maintainable, and optimized code.

Closures and scope are fundamental to understanding JavaScript’s function execution, memory management, and encapsulation. Key concepts include lexical scope, function hoisting, and private variables using closures. Real-world applications of closures, such as debouncing and throttling, are critical for performance optimization in web applications.

Asynchronous JavaScript is crucial for handling operations like fetching data on the frontend and managing requests on the backend. Understanding the event loop, callbacks, microtasks, and macrotasks is essential for writing non-blocking code. Promises and async/await simplify asynchronous logic, while proper error handling, resolving race conditions, and leveraging Promise.all() and Promise.race() improve efficiency.

Prototypes and object-oriented JavaScript play a key role in writing optimized and reusable code. A deep understanding of the prototype chain, prototypal inheritance, and the differences between Object.create() class-based and inheritance ensures better performance. Recognizing the distinctions between ES5 and ES6 classes and optimizing code with prototypes can lead to significant efficiency improvements.

Functional programming concepts are widely used in modern JavaScript frameworks like React. Understanding pure functions, higher-order functions, and function composition enhances code readability and maintainability. Key techniques include using map, filter, and reduce for array transformations, currying functions for partial application, and ensuring immutability to avoid unintended side effects.

Memory management and performance optimization are critical for building high-performance applications. Understanding garbage collection, identifying and preventing memory leaks, and utilizing WeakMap and WeakSet for optimized caching can help manage memory efficiently. Performance techniques such as debouncing and throttling improve responsiveness, while optimizing DOM manipulations enhances rendering speed.

A practical approach to mastering DSA and JavaScript involves integrating these concepts into real-world applications rather than blindly solving problems. Instead of random LeetCode grinding, focus on patterns like sliding window and recursion. Apply DSA principles in real projects by implementing caching with hash tables, optimizing search with tries, and structuring backend systems using trees and graphs.

Following a structured study plan enhances consistency and retention:

• Weeks 1-2: Focus on arrays, strings, and hash tables.

• Weeks 3-4: Dive into linked lists, stacks, and queues.

• Weeks 5-6: Tackle trees, graphs, and dynamic programming.

Teaching and sharing knowledge solidifies understanding. Explaining DSA problems to others, writing technical blogs, or creating tutorials on GitHub are excellent ways to reinforce learning and contribute to the developer community.

Q & A

How much DSA is required for full-stack development?

There’s no straightforward answer. While you may not implement data structures and algorithms (DSA) daily, they form the backbone of problem-solving in software development. A solid grasp of DSA enhances your ability to write efficient code, optimize performance, and tackle complex challenges.

How much math do I need?

For general full-stack development, basic arithmetic—addition, subtraction, multiplication, and division—is sufficient. But if you're diving into specialized fields like machine learning, artificial intelligence, or game development, higher-level mathematics (linear algebra, probability, and statistics) becomes essential.

How long does it take to become a full-stack developer?

There's no universal timeline—it depends on prior experience, learning speed, and consistency. The best approach is to break it into manageable parts and stay consistent. In my case, I dedicated roughly 6 hours daily for several months to build a strong foundation, but this may not be sustainable for you. It can take anywhere from months to years, depending on how much time you have to spend learning.

How many projects should I build?

Instead of building several small, disconnected projects, aim for a comprehensive, feature-rich application that integrates multiple concepts. Think of it as building a single robust solution rather than managing multiple incomplete ones.

Do I need to purchase courses?

It depends on your learning style. Many foundational resources are available for free, but structured paid courses can provide in-depth guidance and accountability. I started with free resources and later invested in paid courses to expand my knowledge, as I found few comprehensive free materials covering advanced topics.

Do I need to grind DSA?

If you are aiming for FAANG level software companies, then yes, you will have to learn DSA in-depth along with good projects and a command on a programming language.

Do I need certifications?

No, you don’t need any certificates to become a full stack developer, but having a certification from freeCodeCamp never hurts. :)

Learning is important, but without building projects, it remains theoretical. Apply what you learn through real-world projects to solidify your skills truly.

Final Notes

Becoming a Full Stack Developer is more than just learning to code—it's about building, deploying, and scaling real-world applications. With the rise of AI, the future of Full Stack Development is even more exciting, and those who adapt early will have the edge.

If you’re serious about Full Stack Development, start with one step at a time, build projects, integrate AI where it makes sense, and never stop learning. 🚀

Conclusion

Full Stack + AI + DevOps = 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 X: Prankur's Twitter

• Connect with me on LinkedIn: Prankur's LinkedIn

• Follow me on Github: Prankur’s Github

• View my Portfolio: Prankur's Portfolio

With all the recent advancements in AI, I wanted to build something that’s not just fun but also a meaningful learning experience. That’s how this project was born—a simple Replit-inspired clone for the web. It combines AI to generate code, lets you run React files, and displays the output seamlessly, just like Replit. On top of that, you can edit files and save your work in real-time, so nothing ever gets lost.

What we’ll cover:

• Prerequisites & Tools

• What We’ll Do Here:

• How Does the App Work?

• How to Set Up Your Tools

• Structure and Features of the App

• How to Build the Back End

• How to Build the Front End

• Playing with the Replit Clone

• Conclusion

Prerequisites & Tools

In this tutorial, we’ll build an AI-powered Replit clone—a web-based IDE. This IDE will enable you to generate React code files, edit them in a VSCode-like environment, preview the final output, and save the code in real time. It will also support CRUD operations on the generated files.

For this project, I’ll leverage some tools I’ve used in the past, including those from my SQL Query Data Extractor project. Below are the tools and technologies we’ll use:

Database

The database is the backbone of any application—it stores data and serves it as needed. For this project, I’ll use my all-time favourite, MongoDB Atlas.

I chose MongoDB Atlas because it integrates seamlessly with Next.js, and since it’s a cloud-based database, I don’t need to host it manually—making it a plug-and-play solution. Performing CRUD operations with MongoDB Atlas is straightforward and efficient.

Code Editor

The code editor is the core of this project, as it powers the IDE experience. For this, I’ll use the legendary Monaco Editor, the same editor that drives VSCode. Monaco Editor handles files effortlessly and supports a wide range of file types. In this project, it will allow users to view and edit code files.

Code Preview

Once we generate and edit code in the Monaco Editor, we’ll need a way to preview its output. For this, I’ll use CodeSandbox’s Sandpack, a free and powerful tool for live code previews.

Sandpack supports various frameworks and file types, whether you’re working with static HTML/CSS files or frameworks like React. It displays files and their real-time output seamlessly.

AI Agent

The AI Agent will be responsible for generating code using Natural Language Processing (NLP). Acting as a bridge between your ideas and the code, it will take user prompts and translate them into functional code files.

For this, I’ll use CopilotKit, my favourite free and open-source tool for AI-powered code generation. CopilotKit will take your ideas and create the corresponding code files based on your input.

AI Model

The AI Agent relies on an underlying AI model to process user inputs and generate code. For this project, I’ll use GroqAI, a flexible and reliable platform that supports various popular AI models. GroqAI’s versatility makes it perfect for this project’s requirements.

Next.js

To build a robust web application that combines both frontend and backend functionalities, I’ll use Next.js. It’s an excellent framework for creating scalable applications, offering server-side rendering and other powerful features that are ideal for this project.

Deployment

For deployment, you can choose any service. I prefer Vercel, as it integrates seamlessly with Next.js and is free for hobby projects.

By combining these tools, you’ll build a powerful, user-friendly application that effortlessly produces the code and provides a live preview like Replit does.

What We’ll Do Here

In this tutorial, you’ll follow these steps to build our app:

Step 1 – Set Up the Database:

Set up a database either locally or on the cloud. For seamless integration, use an online database tool that supports data access and extraction via REST APIs.

Step 2 – Obtain Cloud API Keys:

Retrieve the necessary API keys for your AI model to enable smooth and secure integration.

Step 3 – Build the Web Application:

Develop a web application and configure the backend to integrate CopilotKit. Ensure it’s properly set up for efficient functionality.

Step 4 – Train CopilotKit with Your Database:

Provide your database data to CopilotKit so it can understand and utilize the information for natural language processing.

Step 5 – Integrate the CopilotKit Chat Interface:

Embed the CopilotKit chat interface into your application and configure it to work seamlessly with your app’s workflow.

Step 6 – Test Locally:

Run the application on your local machine, thoroughly testing each feature to identify and resolve any issues.

Step 7 – Deploy the Application:

Once testing is complete and the app is working as expected, deploy it to a hosting platform for public use.

How Does the App Work?

This project is a fun experiment and a step toward my long-term goal of building something around code editors, particularly inspired by VSCode.

The real magic happens with CopilotKit. As soon as you input an idea into CopilotKit, it uses predefined system prompts that adapt to your project requirements. These prompts allow CopilotKit to interpret plain English instructions and transform them into meaningful outputs. In this tutorial, I’ll show you how to configure these system prompts effectively to maximize results.

For example, if you enter the idea “build a simple React app”, CopilotKit passes that idea to the integrated AI model. The AI model, working in coordination with CopilotKit’s system prompts, generates the necessary code files based on your input.

The generated files are then displayed in the File Explorer on the left side of the screen. You can easily browse through the files created by CopilotKit.

To preview the code, simply click on a file like App.js. The file’s code will load into the Monaco Editor on the left, while the Sandpack preview on the right will render a real-time output of the file.

You can now experiment with the files—tweak the code, change colours, fonts, or text, and even write your own logic, just like working with regular HTML, CSS, or React files. Any changes you make will be saved in real time to the database. So even if you accidentally close the project, your progress will be intact. Simply refresh the page, and your code will be right where you left it.

How to Set Up Your Tools

Now we’ll go through everything you need to set up the project.

Install Next.js and dependencies:

First, you’ll need to create a Next.js app. Go to the terminal and run the following command:

npx create-next-app@latest my-next-app

Replace my-next-app with your desired project name and use TypeScript.

Navigate to the project folder:

cd my-next-app

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000 to see your Next.js app in action.

Install CopilotKit and dependencies

Navigate to the project’s root folder in the terminal and run the following command. This will install all the necessary dependencies for CopilotKit along with other essential packages, such as dotenv, groq-sdk, sandpack, Monaco Editor, Lucide React, Socket and Mongoose.

npm install @copilotkit/react-ui @copilotkit/react-core
npm install dotenv
npm install groq-sdk
npm install @codesandbox/sandpack-react
npm install @monaco-editor/react
npm install lucide-react
npm install mongoose
npm install socket.io
npm install socket.io-client

• CopilotKit: This dependency handles all operations and configurations related to CopilotKit.

• Dotenv: Used for managing environment variables, and keeping sensitive keys secure within the project.

• GroqSDK: Facilitates access to various LLM models through a single API key.

• CodeSandbox Sandpack (React): Provides the ability to display real-time previews of the code.

• Monaco Editor: Powers the VSCode-like environment, enabling real-time code editing.

• Lucide React: An icon library used to display icons for files and folders.

• Mongoose: Manages MongoDB schemas for storing and retrieving data from the database.

• socket.io: A very powerful tool for real-time data syncing between client and server.

• socket.io client: Extra socket.io client package for data communication.

Set Up the LLM for Action:

This step is crucial for the project, as it involves setting up the LLM (Large Language Model) to convert natural language (plain English) queries into a React framework working code.

There are many LLMs available, each with its unique strengths. Some are free, while others are paid, making the selection process for this project a bit challenging.

After thorough experimentation, I chose the Groq Adapter because:

• It integrates multiple LLMs into a single platform.

• It offers access via a unified API key.

• It’s fully compatible with CopilotKit.

How to Set Up Groq Cloud

To get started with Groq Cloud, visit its website and either log in if you already have an account or create a new account if you’re new. Once logged in, navigate to the Groq Dashboard.

This is the homepage of Groq cloud:

Once logged in, a new page will open that’ll look like this:

As you can see, the sidebar has an API Keys link. Click on it, and it will open a new page as shown in the image below. You can also select any LLM of your choice which is given at the top right before the view code option.

Here, click on the Create API Key button it will open a pop up like you see below. Just enter the name of your API key and click on Submit to create a new API key for you. Then copy this API key and paste it inside your .env file.

To enable seamless access to various LLMs on Groq Cloud, generate an API key by going to the Groq API Keys section. Create a new API key specifically for the LLM, ensuring that it is properly configured.

With the LLM set-up and all components ready, you are now prepared to build the project.

How to setup the database

Step 1: Create a MongoDB Atlas Account

1. Go to the MongoDB Atlas website.

2. Click on "Try Free" or "Sign Up".

3. Fill in your details (name, email, password) to create an account.

4. Verify your email address by clicking the link sent to your inbox.

   

   Step 2: Create a New Project

5. After logging in, you will be directed to the MongoDB Atlas dashboard.

6. Click on the "New Project" button. This will take you to the Create a Project page.

   

7. Fill in the Project name and click on the next button, and it will open a new page to show the project owner's information.

   

8. Now click on the Create Project Button. This will take you to the main dashboard of the project where you will get the option to create the database.

   

9. Now Click on the Create Button to open a new page with details of deploying your cluster.

10. Choose a cloud provider (AWS, Google Cloud, or Azure) and a region closest to your location.

11. Select the "Free Tier" (free forever, but with limited resources) or a paid tier for larger projects.

    

12. Give your cluster a name (for example, MyCluster).

13. Click "Create Deployment". It will take a few minutes for the cluster to be provisioned.

14. Then It will ask you to connect your cluster to the database through a service. You should see your username and password – keep this somewhere.

    

15. Here, you will have to make yourself a database user, so click on the Create Database user button.

16. It will take a few seconds to complete this process. Once it’s done, close the pop-up and return back to the dashboard.

17. On the dashboard page you can see Get Connection String button. Go on and click on it.

    

18. It will open a new popup containing your MongoDB atlas URI. Simply copy the string, put it into your .env file and use the password you created in step 14.

    

Example use case :

//.env file
MONGODB_URI='YOUR MONGODB URL'

Structure and Features of the App

The focus of this project is on simplicity and functionality, to replicate Replit's core features like code editing and real-time previews. The idea is to create a straightforward web application that lets you:

• Host three essential components: a File Explorer, the Monaco Editor, and a Sandbox.

• Open files generated by CopilotKit in the Monaco Editor and perform CRUD operations on them.

• See the real-time output of your code as you work.

• Chat with the CopilotKit chatbot, which will be fully integrated into the front end.

The plan is to keep the implementation clean and practical while delivering a smooth coding experience.

Webpage Structure

Since we’ve already set up the Next.js app, the next step is to create a minimalistic webpage with the following components:

1. File Explorer: Displays the files generated by CopilotKit.

2. Monaco Editor: A versatile code editor that handles various file types and displays the content.

3. Sandbox: Shows the real-time output of the code.

4. CopilotKit Chatbot: Generates code files based on natural language prompts.

Key Features

• Error Handling: Any failures, such as API or database issues, will be highlighted with red text for immediate visibility.

• Data Presentation: Data is presented in two parts: first in the File Explorer for code files, and second in the Monaco Editor for viewing the content of those files.

• CopilotKit Chatbot Integration: The chatbot will allow natural language interactions with the database. The blue-coloured ball on the page represents the CopilotKit chatbot, which serves as the key interface for interacting with the database.

  • Users can ask questions about the database using natural language.

  • The chatbot processes these queries, converts them into SQL, and fetches the results seamlessly.

The front end will look something like this: https://replit-mongodb.vercel.app/

How to Build the Back End

Before we start building the back end, you’ll need to put all important credentials into your .env file, which should look like this:

NEXT_PUBLIC_GROQ_CLOUD_API_KEY=<your-key-here>
MONGODB_URI=<your-mongodb-url>

These are environment variables used to configure sensitive or environment-specific settings in an application:

1. NEXT_PUBLIC_GROQ_CLOUD_API_KEY:

   • This is a public API key for accessing the Groq Cloud API.

   • It is prefixed with NEXT_PUBLIC_, which means it is exposed to the client-side code in a Next.js application.

   • Replace <your-key-here> with the actual API key provided by Groq Cloud.

2. MONGODB_URI:

   • This is the connection string for a MongoDB database.

   • It includes the database URL, credentials, and other connection details.

   • Replace <your-mongodb-url> with the actual MongoDB connection string.

How to Configure the CopilotKit Back End

Open your Next.js app in any code editor—I prefer VSCode—and go to the root folder, which looks like this:

Inside the app folder, make a new folder called api. Inside the API folder, make another folder called copilotkit. Then in there, make a new file called route.js and paste this code inside the file:

import {
  CopilotRuntime,
  GroqAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";

import Groq from "groq-sdk";

const groq = new Groq({ apiKey: process.env.NEXT_PUBLIC_GROQ_CLOUD_API_KEY });

const copilotKit = new CopilotRuntime({
  async onResponse({ message, context }) {
    try {
      // Extract any file operations from the message and process them
      const fileBlocks = message.content.split("---");
      if (fileBlocks.length > 0) {
        // Format the response to use processFiles action
        return {
          content: `@processFiles(response: \\`${message.content}\\`)`,
        };
      }
      return message;
    } catch (error) {
      console.error("Error in onResponse:", error);
      return message;
    }
  },
});

const serviceAdapter = new GroqAdapter({
  groq,
  model: "llama-3.3-70b-versatile",
  systemPrompt: `You are an AI-powered code generator integrated into a web-based IDE. Your task is to generate project files and code based on user commands.

When generating files, use this exact format:

FILE: filename.ext
CODE:
[code content here]

For multiple files, separate them with "---".

Example response:
I'll create a React component:

FILE: Button.jsx
CODE:
import React from 'react';

const Button = () => {
  return (
    <button className="btn">Click me</button>
  );
};

export default Button;

Important rules:
- Always include both FILE: and CODE: markers
- Use appropriate file extensions
- Generate complete, working code
- Maintain proper indentation
- Explain what you're creating before showing the files
- Make sure code is syntactically correct`,
});

export const POST = async (req) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime: copilotKit,
    serviceAdapter,
    endpoint: "/api/copilotkit",
  });

  return handleRequest(req);
};

Here’s a detailed explanation of each part:

This code defines a CopilotKit Runtime integration with Next.js, designed to process requests for generating and managing code files in a web-based IDE environment. It connects to the Groq cloud service for additional functionalities and processes file-based outputs from AI-generated responses.

This code sets up a CopilotRuntime integration with Groq's AI model to generate and process code files in response to user requests. Here's a breakdown:

Key Components:

1. Groq Initialization:

   • The Groq SDK is initialized using the NEXT_PUBLIC_GROQ_CLOUD_API_KEY environment variable.

   • The model used is llama-3.3-70b-versatile.

2. CopilotRuntime:

   • A CopilotRuntime instance is created with a custom onResponse handler.

   • The onResponse function processes the AI's response:

     • Extracts file blocks (separated by ---) from the message.

     • Formats the response to trigger a processFiles action if file blocks are detected.

3. GroqAdapter:

   • A GroqAdapter is configured to interact with the Groq API.

   • It includes a system prompt that instructs the AI to generate code files in a specific format:

     • Files are marked with FILE: and CODE:.

     • Multiple files are separated by ---.

     • The AI is instructed to generate complete, syntactically correct code with proper explanations.

4. API Endpoint:

   • A POST the endpoint is exposed using Next.js App Router.

   • It uses copilotRuntimeNextJSAppRouterEndpoint to handle incoming requests, passing them to the CopilotRuntime and GroqAdapter.

Example Usage

1. Request

   • A POST request to /api/copilotkit might look like this:

       curl -X POST http://localhost:3000/api/copilotkit \
       -H "Content-Type: application/json" \
       -d '{"command": "Create a React component for a button"}'
     

2. AI Response (Processed by onResponse)

   • AI might return this response:

       FILE: Button.jsx
       CODE:
       import React from 'react';
     
       const Button = () => {
         return <button>Click me</button>;
       };
     
       export default Button;
     

3. Response to Client

   • The API wraps the response into the formatted structure:

       {
         "content": "@processFiles(response: `FILE: Button.jsx\nCODE:\nimport React from 'react';\n\nconst Button = () => {\n  return <button>Click me</button>;\n};\n\nexport default Button;`)"
       }
     

Key Features

1. AI-Powered Code Generation with copilotkit popup:

   • The system generates complete project files based on user instructions.

   • Ensures proper formatting (for example, FILE: and CODE: markers).

2. File Handling:

   • Splits multi-file responses into manageable blocks using ---.

   • Supports actions like @processFiles for integration with the IDE.

3. Scalable API:

   • Modular design with CopilotRuntime and GroqAdapter allows easy extension and customization.

4. Error Handling:

   • Logs errors without interrupting the workflow.

   • Defaults to returning the unprocessed message on failure.

Making Routes for CRUD Operation

So far, we've covered how to integrate CopilotKit into the backend. Now, we need to handle file operations, so we'll create another route to manage files with the database.

To develop the backend for file handling, I'll create a new folder inside the API folder and name it files. Inside the files folder, I’ll create a simple route.js file. Here’s the code I’ll be using inside the file:

• app/api/files/route.tsx

• 
    import { NextResponse } from "next/server";
    import mongoose from "mongoose";
    import { connectDB, File } from "@/app/lib/mongodb";
  
    // Type for the request body
    interface FileRequestBody {
      id?: string;
      name?: string;
      content?: string;
    }interface FileCreateRequest {
      name: string;
      content: string;
    }
  
    interface FileUpdateRequest {
      id: string;
      name?: string;
      content?: string;
    }
  
    // Fetch all files (GET /api/files)
    export async function GET(): Promise<Response> {
    try {
        await connectDB(); // Ensure DB connection
        const files = await File.find({});
        return NextResponse.json(files, { status: 200 });
      } catch (error) {
        return NextResponse.json(
          { error: "Failed to fetch files" },
          { status: 500 }
        );
      }
    }
  
    // Create a new file (POST /api/files)
    export async function POST(req: Request): Promise<Response> {
    try {
        await connectDB(); // Ensure DB connection is successful
        // Parse the request body
        const { name, content }: FileRequestBody = await req.json();
        if (!name || !content) {
          throw new Error("Missing required fields: name or content");
        }
  
        // Log the incoming data for debugging
        console.log("Creating file with data:", { name, content });
  
        // Create a new file in the database
        const newFile = new File({ name, content });
        await newFile.save();
  
        // Return the newly created file
        return NextResponse.json(newFile, { status: 201 });
      } catch (error: any) {
        // Log the error for debugging
        console.error("Error creating file:", error);
  
        return NextResponse.json(
          { error: "Failed to create file", message: error.message },
          { status: 400 }
        );
      }
    }
  
    // Update file content (PUT /api/files)
    export async function PUT(req: Request): Promise<Response> {
    try {
        await connectDB(); // Ensure DB connection
        const { id, name, content }: FileRequestBody = await req.json();
  
        // Validate ID format
        if (!id || !mongoose.Types.ObjectId.isValid(id)) {
          return NextResponse.json({ error: "Invalid file ID" }, { status: 400 });
        }
  
        // Update file name or content if provided
        const updatedFile = await File.findByIdAndUpdate(
          id,
          { ...(name && { name }), ...(content && { content }) },
          { new: true }
        );
  
        if (!updatedFile) {
          return NextResponse.json({ error: "File not found" }, { status: 404 });
        }
  
        return NextResponse.json(updatedFile, { status: 200 });
      } catch (error: any) {
        return NextResponse.json(
          { error: "Failed to update file" },
          { status: 400 }
        );
      }
    }
  
    // Delete a file (DELETE /api/files)
    export async function DELETE(req: Request): Promise<Response> {
    try {
        await connectDB(); // Ensure DB connection
        const { id }: FileRequestBody = await req.json();
  
        // Validate ID format
        if (!id || !mongoose.Types.ObjectId.isValid(id)) {
          return NextResponse.json({ error: "Invalid file ID" }, { status: 400 });
        }
  
        await File.findByIdAndDelete(id);
        return NextResponse.json(
          { message: "File deleted successfully" },
          { status: 200 }
        );
      } catch (error: any) {
        return NextResponse.json(
          { error: "Failed to delete file" },
          { status: 400 }
        );
      }
    }
  

Code explanation :

This code defines API routes for handling CRUD operations (Create, Read, Update, Delete) on a MongoDB collection called File in a Next.js application. Each route is connected to MongoDB using Mongoose and we used NextResponse to format the responses.

Code Breakdown

1. Imports

import { NextResponse } from "next/server";
import mongoose from "mongoose";
import connectDB from "@/app/lib/mongodb"; //we made this file
import File from "@/app/lib/models/File"; //we made this file

• NextResponse: Used for creating HTTP responses in Next.js API routes.

• connectDB: Connects to the MongoDB database.

• File: A Mongoose model representing the File collection.

2. Fetch All Files (GET)

export async function GET() {
  await connectDB(); // Ensure DB connection
  try {
    const files = await File.find({}); // Fetch all files
    return NextResponse.json(files, { status: 200 }); // Return files in JSON format
  } catch (error) {
    return NextResponse.json(
      { error: "Failed to fetch files" },
      { status: 500 }
    );
  }
}

• Purpose: Retrieves all documents in the File collection.

• Flow:

  1. Connects to MongoDB.

  2. Uses File.find({}) to fetch all files.

  3. Returns the files with a 200 status or an error with a 500 status.

3. Create a New File (POST)

export async function POST(req) {
  await connectDB(); // Ensure DB connection

  try {
    const { name, content } = await req.json(); // Parse the request body
    if (!name || !content) {
      throw new Error("Missing required fields: name or content");
    }

    const newFile = new File({ name, content }); // Create new file
    await newFile.save(); // Save to MongoDB

    return NextResponse.json(newFile, { status: 201 }); // Return the new file
  } catch (error) {
    return NextResponse.json(
      { error: "Failed to create file", message: error.message },
      { status: 400 }
    );
  }
}

• Purpose: Creates a new document in the File collection.

• Flow:

  1. Parses the name and content fields from the request body.

  2. Validates the required fields.

  3. Creates and save the file in MongoDB.

  4. Returns the new file with a 201 status or an error with a 400 status.

4. Update a File (PUT)

export async function PUT(req) {
  await connectDB(); // Ensure DB connection
  try {
    const { id, name, content } = await req.json();

    if (!mongoose.Types.ObjectId.isValid(id)) {
      return NextResponse.json({ error: "Invalid file ID" }, { status: 400 });
    }

    const updatedFile = await File.findByIdAndUpdate(
      id,
      { ...(name && { name }), ...(content && { content }) },
      { new: true }
    );

    if (!updatedFile) {
      return NextResponse.json({ error: "File not found" }, { status: 404 });
    }

    return NextResponse.json(updatedFile, { status: 200 });
  } catch (error) {
    return NextResponse.json(
      { error: "Failed to update file" },
      { status: 400 }
    );
  }
}

• Purpose: Updates an existing document in the File collection.

• Flow:

  1. Parses the id, name, and content from the request body.

  2. Validates the id using Mongoose's ObjectId.

  3. Updates the document using File.findByIdAndUpdate() (updates only provided fields).

  4. Returns the updated document with a 200 status, or an error with 400 or 404.

5. Delete a File (DELETE)

export async function DELETE(req) {
  await connectDB(); // Ensure DB connection
  try {
    const { id } = await req.json();

    if (!mongoose.Types.ObjectId.isValid(id)) {
      return NextResponse.json({ error: "Invalid file ID" }, { status: 400 });
    }

    await File.findByIdAndDelete(id); // Delete the document
    return NextResponse.json(
      { message: "File deleted successfully" },
      { status: 200 }
    );
  } catch (error) {
    return NextResponse.json(
      { error: "Failed to delete file" },
      { status: 400 }
    );
  }
}

• Purpose: Deletes a document from the File collection.

• Flow:

  1. Parses the id from the request body.

  2. Validates the id format.

  3. Uses File.findByIdAndDelete() to remove the document.

  4. Returns a success message with a 200 status or an error with 400.

Example API Requests: How to test API in local

1. GET All Files

    curl -X GET http://localhost:3000/api/files
   

2. Create a File (POST)

    curl -X POST http://localhost:3000/api/files \
    -H "Content-Type: application/json" \
    -d '{"name": "example.txt", "content": "This is a test file"}'
   

3. Update a File (PUT)

    curl -X PUT http://localhost:3000/api/files \
    -H "Content-Type: application/json" \
    -d '{"id": "64ffab67c728f51234567890", "name": "updated.txt", "content": "Updated content"}'
   

4. Delete a File (DELETE)

    curl -X DELETE http://localhost:3000/api/files \
    -H "Content-Type: application/json" \
    -d '{"id": "64ffab67c728f51234567890"}'
   

Creating MongoDB Schemas

Now, create a lib folder inside the app folder. This lib folder will handle essential database tasks, such as database schema and connectivity. Inside the lib folder, create another folder named models. Within this models folder, create a new file called File.js and paste the following code into it.

This version simplifies the instructions and improves clarity while maintaining the original meaning.

import mongoose, { Schema, Document, Model } from "mongoose";

// Define an interface for the file document
interface IFile extends Document {
  name: string;
  content: string;
  createdAt: Date;
  updatedAt: Date;
}

// Define the schema for the file model
const fileSchema = new Schema<IFile>(
  {
    _id: { type: Schema.Types.ObjectId, auto: true }, // MongoDB default _id
    name: { type: String, required: true }, // Removed unique constraint
    content: { type: String, required: true },
  },
  { timestamps: true } // Automatically adds createdAt & updatedAt
);

// Export the File model with type safety
const File: Model<IFile> =
  mongoose.models.File || mongoose.model<IFile>("File", fileSchema);

export default File;

Code Explanation

This code defines a Mongoose schema and model for a File collection in a MongoDB database. It specifies the structure and rules for documents in the collection.

This code defines a Mongoose schema and model for a File document in MongoDB. Here's a brief explanation:

Key Components:

1. Interface (IFile):

   • Defines the structure of a File document with:

     • name (string, required).

     • content (string, required).

     • createdAt and updatedAt (automatically managed by Mongoose).

2. Schema (fileSchema):

   • Maps the IFile interface to a MongoDB schema.

   • Includes:

     • _id: Auto-generated MongoDB ObjectId.

     • name and content: Required fields.

     • timestamps: true: Automatically adds createdAt and updatedAt fields.

3. Model (File):

   • Creates or retrieves the Mongoose model for the File collection.

   • Ensures type safety using the IFile interface.

Connecting to database

Half of the work is done! Now, it’s time to connect our app to the database. To do this, I’ll create a new file inside the lib folder, where we previously created the database schema. I’ll name the file mongodb.tsx and paste the following code inside it:

import mongoose, { Schema, Model, Connection } from "mongoose";
import { IFile } from "../types";

// Define mongoose connection URI
const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error(
    "Please define the MONGODB_URI environment variable inside .env.local"
  );
}

let cached: {
  conn: Connection | null;
  promise: Promise<Connection> | null;
} = { conn: null, promise: null };

export async function connectDB(): Promise<Connection> {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    cached.promise = mongoose.connect(MONGODB_URI!).then((mongoose) => {
      return mongoose.connection;
    });
  }

  try {
    cached.conn = await cached.promise;
  } catch (e) {
    cached.promise = null;
    throw e;
  }

  return cached.conn;
}

// Define the schema for the file model
const fileSchema = new Schema<IFile>(
  {
    name: { type: String, required: true },
    content: { type: String, required: true },
  },
  {
    timestamps: true,
  }
);

// Export the File model with type safety
export const File = (mongoose.models.File ||
mongoose.model<IFile>("File", fileSchema)) as Model<IFile>;

Code Explanation

This code sets up a MongoDB connection using the mongoose library in a Node.js or Next.js application. It ensures that the database is connected efficiently and prevents redundant connections.

This code sets up a MongoDB connection and defines a Mongoose schema and model for a File document. Here's a brief explanation:

Key Components:

1. MongoDB Connection:

   • Uses the MONGODB_URI environment variable to connect to MongoDB.

   • Implements a caching mechanism to reuse the connection and avoid multiple connections.

   • Throws an error if MONGODB_URI is not defined.

2. Schema (fileSchema):

   • Defines the structure of a File document with:

     • name (string, required).

     • content (string, required).

   • Automatically adds createdAt and updatedAt timestamps.

3. Model (File):

   • Creates or retrieves the Mongoose model for the File collection.

   • Ensures type safety using the IFile interface.

Example Directory Structure:

/project
  /pages
    /api
      test.js
  /utils
    connectDB.js
  .env.local

Final Notes:

• This code avoids multiple MongoDB connections by checking the readyState.

• It's reusable and modular, making it easy to maintain.

• Always secure the MONGODB_URI in-environment variables to avoid exposing sensitive credentials.

Ensuring type safety

Since we are using TypeScript, we will have to declare the file type files , socket and an index. To do so, create a new folder in root directory of the project and name it types and make three files socket.ts ,files.ts and index.ts inside the folder. Inside each file, paste the given code for their respective file.

//index.ts
export interface IFile {
  _id: string;
  name: string;
  content: string;
  createdAt?: Date;
  updatedAt?: Date;
}
//socket.ts
import { FileData } from '../types/file';

export interface ServerToClientEvents {
"new-file": (file: FileData) => void;
"delete-file": (fileId: string) => void;
"file-update": (data: { fileId: string; content: string }) => void;
}

export interface ClientToServerEvents {
"new-file": (file: FileData) => void;
"delete-file": (fileId: string) => void;
"file-update": (data: { fileId: string; content: string }) => void;
}
//file.ts
export interface FileData {
_id: string;
name: string;
content: string;
}

How to Build the Front End

For the front end, we’ll keep it simple, aiming for a UI that closely resembles Replit. The key components we need for this project are a File Explorer, Monaco Editor, and Sandbox component.

• File Explorer: This component will display and manage the code files, positioned on the left side of the screen.

• Monaco Editor: This component will allow users to view and edit the content of the code files.

• Sandbox: This component will render the live preview of the content inside the code files.

To build these components, we won’t use any third-party UI libraries; instead, we’ll rely solely on TailwindCSS, which is pre-configured with Next.js.

Now, let’s build the components:

1. Open your VS Code.

2. Open the Next.js folder where you created your project.

   Since I work without a src folder, you’ll find only an app folder. Inside the app folder, create a new folder called components.

• After creating the folder, your project structure should look something like this:

• FileExplorer.js -This is our file explorer

• ScreenOne.js- This is our Monaco editor

• LivePreview.js- This is our sandbox component

Let’s see how I build these components and you can too,

FileExploer.tsx

The FileExplorer is a React component that displays a list of files fetched from a backend (MongoDB) and allows users to select, create, edit, and delete files. It uses React Hooks for state management and lifecycle effects, Tailwind CSS for styling, and lucide-react icons for UI actions.

import React, { useEffect, useState } from "react";
import { Plus, Trash2, Pencil } from "lucide-react";
import io, { Socket } from "socket.io-client";
import { FileData } from '../types/file';

interface FileExplorerProps {
files: FileData[];
onFileSelect: (file: FileData) => void;
currentFile: FileData | null;
}

const FileExplorer: React.FC<FileExplorerProps> = ({
files: initialFiles,
onFileSelect,
currentFile,
}) => {
const [files, setFiles] = useState<FileData[]>(initialFiles);
  const [socket, setSocket] = useState<Socket | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const [newFileName, setNewFileName] = useState<string>("");
  const [editingFile, setEditingFile] = useState<string | null>(null);
  const [editedFileName, setEditedFileName] = useState<string>("");

  // Initialize socket connection
  useEffect(() => {
    const socketInstance = io("http://localhost:3000", {
      reconnection: true,
      reconnectionAttempts: 5,
      reconnectionDelay: 1000,
    });

    socketInstance.on("connect", () => {
      console.log("Connected to Socket.IO server");
    });

    socketInstance.on("connect_error", (error) => {
      console.error("Socket connection error:", error);
    });

    socketInstance.on("disconnect", () => {
      console.log("Disconnected from Socket.IO server");
    });

    setSocket(socketInstance);

    return () => {
      if (socketInstance) {
        socketInstance.disconnect();
      }
    };
  }, []);

  useEffect(() => {
    if (!socket) return;

    // Listen for real-time updates
    socket.on("new-file", (newFile: FileData) => {
      setFiles((prevFiles) => {
        if (!prevFiles.some((file) => file._id === newFile._id)) {
          return [...prevFiles, newFile];
        }
        return prevFiles;
      });
    });

    socket.on("delete-file", (fileId: string) => {
      setFiles((prevFiles) => prevFiles.filter((file) => file._id !== fileId));
    });

    socket.on("update-file", (updatedFile: FileData) => {
      setFiles((prevFiles) =>
        prevFiles.map((file) =>
          file._id === updatedFile._id
            ? { ...file, name: updatedFile.name }
            : file
        )
      );
    });

    return () => {
      socket.off("new-file");
      socket.off("delete-file");
      socket.off("update-file");
    };
  }, [socket]);

  // Fetch initial files
  const fetchFiles = async () => {
    try {
      const response = await fetch("/api/files");
      if (!response.ok) throw new Error("Failed to fetch files");
    const data: FileData[] = await response.json();
      setFiles(data);
    } catch (error) {
      console.error("Error fetching files:", error);
      setError("Failed to load files");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchFiles();
  }, []);

  // Create new file
  const createNewFile = async () => {
    if (!newFileName.trim()) return;
    try {
      const response = await fetch("/api/files", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: newFileName }),
      });

      if (!response.ok) throw new Error("Failed to create file");

    const newFile: FileData = await response.json();
      socket?.emit("new-file", newFile);
      setNewFileName("");
    } catch (error) {
      console.error("Error creating file:", error);
    }
  };

  const handleDeleteFile = async (e: React.MouseEvent, id: string) => {
    e.stopPropagation();
    setFiles((prevFiles) => prevFiles.filter((file) => file._id !== id)); // Optimistic update

    try {
      const response = await fetch("/api/files", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id }),
      });

      if (!response.ok) throw new Error("Failed to delete file");

      socket?.emit("delete-file", id);
    } catch (error) {
      console.error("Error deleting file:", error);
      await fetchFiles(); // Revert state if API call fails
    }
  };

const handleEditStart = (e: React.MouseEvent, file: FileData) => {
    e.stopPropagation();
    setEditingFile(file._id);
    setEditedFileName(file.name);
  };

  const handleEditSave = async (
    e: React.FocusEvent | React.KeyboardEvent,
    id: string
  ) => {
    e.preventDefault();
    if (!editedFileName.trim()) return;

    const previousFiles = [...files];
    setFiles((prevFiles) =>
      prevFiles.map((file) =>
        file._id === id ? { ...file, name: editedFileName } : file
      )
    ); // Optimistic update

    try {
      const response = await fetch("/api/files", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id, name: editedFileName }),
      });

      if (!response.ok) throw new Error("Failed to update file");

    const updatedFile: FileData = await response.json();
      socket?.emit("update-file", updatedFile);
      setEditingFile(null);
    } catch (error) {
      console.error("Error updating file:", error);
      setFiles(previousFiles); // Revert state if API call fails
    }
  };

  return (
    <div className="w-64 bg-gray-900 p-4 h-full text-white rounded-lg shadow-lg flex flex-col">
      <h2 className="text-lg font-semibold mb-4">Files</h2>

      {loading ? (
        <div className="text-gray-400 text-sm">Loading files...</div>
      ) : error ? (
        <div className="text-red-500 text-sm">{error}</div>
      ) : files.length === 0 ? (
        <div className="text-gray-400 text-sm">No files yet</div>
      ) : (
        <div className="space-y-2 overflow-y-auto flex-grow">
          {files.map((file) => (
            <div
              key={file._id}
              className={`cursor-pointer flex justify-between items-center p-2 rounded text-white transition-all duration-200 ${
                currentFile?._id === file._id
                  ? "bg-blue-600"
                  : "hover:bg-gray-700"
              }`}
              onClick={() => onFileSelect(file)}
            >
              {editingFile === file._id ? (
                <input
                  type="text"
                  value={editedFileName}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEditedFileName(e.target.value)}
                onBlur={(e: React.FocusEvent<HTMLInputElement>) => handleEditSave(e, file._id)}
                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>
                e.key === "Enter" ? handleEditSave(e, file._id) : null
                }
                  autoFocus
                  className="bg-gray-800 text-white p-1 rounded outline-none w-32"
                />
              ) : (
                <span className="truncate flex-grow">📄 {file.name}</span>
              )}

              <div className="flex items-center gap-2">
                <button
                onClick={(e: React.MouseEvent) => handleEditStart(e, file)}
                  className="text-yellow-400 hover:text-yellow-600 p-1 rounded"
                >
                  <Pencil size={16} />
                </button>
                <button
                onClick={(e: React.MouseEvent) => handleDeleteFile(e, file._id)}
                  className="text-red-400 hover:text-red-600 p-1 rounded"
                >
                  <Trash2 size={16} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}


    </div>
  );
};

export default FileExplorer;

Code Explanation

Brief Explanation of the Code

The FileExplorer component is a React component designed to manage and display a list of files in real time. It uses Socket.IO for real-time updates, allowing users to add, delete, and edit files dynamically.

Key Features:

1. State Management

The component uses React's useState Hook to manage the following states:

• files: List of files displayed in the File Explorer.

• socket: The active Socket.IO connection.

• loading & error: Manage the state of file loading.

• newFileName, editingFile, and editedFileName: Manage file creation and editing processes.

const [files, setFiles] = useState([]);
const [socket, setSocket] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [newFileName, setNewFileName] = useState("");
const [editingFile, setEditingFile] = useState(null);
const [editedFileName, setEditedFileName] = useState("");

2. Socket.IO Integration

• Establishes a real-time connection to a Socket.IO server.

• Listens for events like new-file, delete-file, and update-file to update the file list dynamically.

• Cleans up the socket connection when the component unmounts.

useEffect(() => {
  const socketInstance = io("http://localhost:3000", {
    reconnection: true,
    reconnectionAttempts: 5,
    reconnectionDelay: 1000,
  });

  socketInstance.on("connect", () => {
    console.log("Connected to Socket.IO server");
  });

  setSocket(socketInstance);

  return () => {
    if (socketInstance) socketInstance.disconnect();
  };
}, []);

3. Real-Time File Updates

Handles real-time events for creating, deleting, and updating files.

useEffect(() => {
  if (!socket) return;

  socket.on("new-file", (newFile) => {
    setFiles((prevFiles) =>
      prevFiles.some((file) => file._id === newFile._id)
        ? prevFiles
        : [...prevFiles, newFile]
    );
  });

  socket.on("delete-file", (fileId) => {
    setFiles((prevFiles) => prevFiles.filter((file) => file._id !== fileId));
  });

  socket.on("update-file", (updatedFile) => {
    setFiles((prevFiles) =>
      prevFiles.map((file) =>
        file._id === updatedFile._id
          ? { ...file, name: updatedFile.name }
          : file
      )
    );
  });

  return () => {
    socket.off("new-file");
    socket.off("delete-file");
    socket.off("update-file");
  };
}, [socket]);

4. CRUD Operations

• Fetch Files: Retrieves the initial list of files from the server.

• Create File: Sends a POST request to add a new file.

• Delete File: Sends a DELETE request to remove a file and updates the UI optimistically.

• Edit File: Sends a PUT request to update a file's name and performs optimistic updates.

  This code defines a FileExplorer React component that allows users to manage and interact with files in a file system.

  Note: All the operations on the application get saved in real-time for the demo you can refresh the page to see the changes don’t get removed.

ScreenOne.tsx

The ScreenOne component is a code editor panel that dynamically displays and updates code for a selected file. It integrates the Monaco Editor to highlight syntax based on the file type (for example, JavaScript, HTML, CSS).

The component shows the selected file's name, allows users to edit its content, and sends updates back to the database in real time. It also offers a clean, user-friendly interface with a dark theme and configurable editor options. This is ideal for coding environments like IDEs or code playgrounds.

import React, { useEffect, useState } from "react";
import { Editor } from "@monaco-editor/react";

interface File {
  name: string;
}

interface ScreenOneProps {
  selectedFile: File | null;
  code: string;
  onChange: (newCode: string | undefined) => void;
}

const ScreenOne: React.FC<ScreenOneProps> = ({ selectedFile, code, onChange }) => {
  const [language, setLanguage] = useState<string>("javascript");

  useEffect(() => {
    if (!selectedFile) return;
    setLanguage(getLanguageForFile(selectedFile.name));
  }, [selectedFile]);

  const getLanguageForFile = (filename: string): string => {
    const extension = filename.split(".").pop()?.toLowerCase();
    switch (extension) {
      case "js":
      case "jsx":
        return "javascript";
      case "html":
        return "html";
      case "css":
        return "css";
      case "json":
        return "json";
      default:
        return "plaintext";
    }
  };

  const handleCodeChange = (newCode: string | undefined): void => {
    onChange(newCode); // Call the onChange prop to update the code in LivePreview
  };

  return (
    <div className="flex-1 flex flex-col bg-[#2d2d2d] text-white p-6 rounded-lg shadow-md">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-2xl font-semibold">Code Editor</h2>
        <div className="text-sm text-gray-400">
          {selectedFile ? selectedFile.name : "No file selected"}
        </div>
      </div>
      <div className="flex-grow bg-gray-800 rounded-lg shadow-inner">
        <Editor
          height="calc(100vh - 160px)"
          language={language}
          value={code}
          onChange={handleCodeChange} // Update the code on change
          theme="vs-dark"
          options={{
            minimap: { enabled: false },
            lineNumbers: "on",
            wordWrap: "on",
            scrollBeyondLastLine: false,
          }}
        />
      </div>
    </div>
  );
};

export default ScreenOne;

Code Explanation

Explanation of the Code:

This React component, ScreenOne, represents a code editor screen where users can edit files in a specified programming language. The editor dynamically adjusts its syntax highlighting based on the selected file's type. It uses the @monaco-editor/react library for the editor interface.

This code defines a ScreenOne React component, which is a code editor using the Monaco Editor (used in VS Code). Here's a brief explanation:

Key Features:

1. Code Editor:

   • Uses the @monaco-editor/react library to render a code editor.

   • Supports syntax highlighting for various languages (for example, JavaScript, HTML, CSS, JSON).

2. Dynamic Language Detection:

   • Detects the programming language based on the selected file's extension (for example, .js → JavaScript).

   • Defaults to plaintext for unsupported file types.

3. Props:

   • selectedFile: The currently selected file (contains the file name).

   • code: The current code content to display in the editor.

   • onChange: A callback function to handle code changes.

4. UI:

   • Displays the file name and a title ("Code Editor").

   • Styled with Tailwind CSS for a dark theme and rounded corners.

5. Editor Configuration:

   • Uses the vs-dark theme.

   • Disables the mini-map and enables line numbers and word wrap.

LivePreview.tsx

The LivePreview component dynamically generates a live code preview for either static projects (HTML, CSS, JS) or React-based projects. It detects the type of project, and sets up the required files (for example, index.html, App.js), and renders a real-time preview using CodeSandbox's Sandpack. The preview adapts to the selected file and updates as the code changes, providing a seamless coding experience.

import React, { useEffect, useState } from "react";
import {
  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor,
  SandpackPreview,
  SandpackThemeProvider,
} from "@codesandbox/sandpack-react";

interface FileAccumulator {
[key: string]: { code: string };
}

interface File {
  name: string;
  content: string;
}

interface LivePreviewProps {
files: File[];
currentFile: File | null;
code: string;
onCodeChange?: (value: string | undefined) => void;
}
interface SandpackFile {
  code: string;
}

interface SandpackFiles {
  [key: string]: SandpackFile;
}

const LivePreview: React.FC<LivePreviewProps> = ({ files, currentFile, code }) => {
  const [sandboxFiles, setSandboxFiles] = useState<Record<string, { code: string }>>({});
  const [template, setTemplate] = useState<"vanilla" | "react">("vanilla"); // Default to static
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    if (!currentFile || !files) return;

    const newFiles: SandpackFiles = files.reduce((acc: FileAccumulator, file) => {
    acc[`/${file.name}`] = { code: file.content };
    return acc;
    }, {});

    // Check if the project is React-based
    const isReactProject = files.some(
      (file) =>
        file.name.endsWith(".jsx") ||
        (file.name.endsWith(".js") && file.content.includes("React"))
    );

    if (isReactProject) {
      setTemplate("react");

      // Ensure App.js exists
      if (!newFiles["/App.js"]) {
        newFiles["/App.js"] = {
          code: `
            import React from "react";
            function App() { return <h1>Hello, React!</h1>; }
            export default App;
          `,
        };
      }

      // Ensure index.js exists
      newFiles["/index.js"] = {
        code: `
          import React from "react";
          import ReactDOM from "react-dom/client";
          import App from "./App";

          const root = document.getElementById("root");
          if (root) {
            ReactDOM.createRoot(root).render(<App />);
          } else {
            console.error("Root element not found!");
          }
        `,
      };

      // Ensure index.html exists
      newFiles["/index.html"] = {
        code: `
          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>React App</title>
          </head>
          <body>
            <div id="root"></div>
          </body>
          </html>
        `,
      };

      // Ensure package.json exists
      newFiles["/package.json"] = {
        code: JSON.stringify(
          {
            main: "/index.js",
            dependencies: {
              react: "18.2.0",
              "react-dom": "18.2.0",
            },
          },
          null,
          2
        ),
      };
    } else {
      setTemplate("vanilla");

      const htmlFile = files.find((f) => f.name.endsWith(".html"));
      if (htmlFile) {
        let htmlContent = htmlFile.content;

        // Inject CSS files
        files
          .filter((f) => f.name.endsWith(".css"))
          .forEach((cssFile) => {
            htmlContent = htmlContent.replace(
              "</head>",
              `<link rel="stylesheet" href="${cssFile.name}"></head>`
            );
          });

        // Inject JS files
        files
          .filter((f) => f.name.endsWith(".js"))
          .forEach((jsFile) => {
            htmlContent = htmlContent.replace(
              "</body>",
              `<script src="${jsFile.name}"></script></body>`
            );
          });

        newFiles["/index.html"] = { code: htmlContent };
      }
    }

    // Ensure the current file is included
    newFiles[`/${currentFile.name}`] = { code };
    setSandboxFiles(newFiles);
    setLoading(false);
  }, [files, currentFile, code]);

  return (
    <div className="flex-1 bg-white border-l border-gray-300">
      {loading ? (
        <div className="h-full flex items-center justify-center text-gray-500">
          Loading...
        </div>
      ) : currentFile ? (
        <SandpackProvider
        template={template}
        files={sandboxFiles}
        options={{ activeFile: `/${currentFile.name}` }}
        >
        <SandpackThemeProvider>
            <SandpackLayout>
            <SandpackCodeEditor showTabs={false}  />
            <SandpackPreview style={{ height: "600px", border: "none" }} />
            </SandpackLayout>
        </SandpackThemeProvider>
        </SandpackProvider>
      ) : (
        <div className="h-full flex items-center justify-center text-gray-500">
          Select a file to preview
        </div>
      )}
    </div>
  );
};

export default LivePreview;

Code Explanation

Explanation of the Code:

The LivePreview component provides a real-time live preview environment for static HTML/CSS/JS files or React-based projects. It uses the CodeSandbox Sandpack library to dynamically render code files in a browser-like preview window. The component automatically adjusts its behavior based on the file types and content to determine if the project is static or React-based.

This code defines a LivePreview React component that uses Sandpack (from CodeSandbox) to provide a live code editor and preview environment. Here's a brief explanation:

Key Features:

1. Sandpack Integration:

   • Uses @codesandbox/sandpack-react to render a code editor and live preview.

   • Supports both React and vanilla JavaScript/HTML/CSS projects.

2. Dynamic File Handling:

   • Converts a list of files (files prop) into a format compatible with Sandpack.

   • Automatically detects if the project is React-based (e.g., contains .jsx or React imports).

   • Ensures necessary files (for example, App.js, index.js, index.html, package.json) exist for React projects.

3. Template Switching:

   • Sets the Sandpack template to "react" for React projects or "vanilla" for static HTML/CSS/JS projects.

4. Code Injection:

   • For vanilla projects, injects linked CSS and JS files into the HTML file.

5. Loading State:

   • Displays a loading message while processing files.

6. UI:

   • Shows a code editor and live preview side by side.

   • Displays a message if no file is selected.

Running sockets in the app

Now it is time to eat that big frog. As you know we are using sockets for real-time data communication so we need a server.tsx file in the root directory of the app (outside of the src folder) and paste this code:

import { createServer, IncomingMessage, ServerResponse } from "http";
import { parse, UrlWithParsedQuery } from "url";
import next from "next";
import { Server, Socket } from "socket.io";

const dev: boolean = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const httpServer = createServer((req: IncomingMessage, res: ServerResponse) => {
    const parsedUrl: UrlWithParsedQuery = parse(req.url || "", true);
    handle(req, res, parsedUrl);
  });

  // Determine the CORS origin dynamically
  const allowedOrigin: string = dev
    ? "http://localhost:3000" // Local development
    : "*"; // Vercel deployment

  // Initialize Socket.IO with dynamic CORS configuration
  const io = new Server(httpServer, {
    cors: {
      origin: allowedOrigin,
      methods: ["GET", "POST"],
      credentials: true,
    },
  });

  // Socket.IO event handlers
  io.on("connection", (socket: Socket) => {
    console.log("Client connected");

    // Handle new file creation
    socket.on("new-file", (newFile: { id: string; name: string; content: string }) => {
      console.log("New file created:", newFile);
      // Broadcast to all clients except sender
      socket.broadcast.emit("new-file", newFile);
    });

    // Handle file deletion
    socket.on("delete-file", (fileId: string) => {
      console.log("File deleted:", fileId);
      socket.broadcast.emit("delete-file", fileId);
    });

    // Handle file update
    socket.on("update-file", (updatedFile: { id: string; name: string; content: string }) => {
      console.log("File updated:", updatedFile);
      socket.broadcast.emit("update-file", updatedFile);
    });

    // Handle client disconnect
    socket.on("disconnect", () => {
      console.log("Client disconnected");
    });
  });

  // Start the server on the specified port
  const PORT: number | string = process.env.PORT || 3000;
  httpServer.listen(PORT, () => {
    console.log(`> Ready on ${dev ? "http://localhost:3000" : allowedOrigin}`);
  });
});

Code Explanation

This code sets up a Next.js server with Socket.IO for real-time communication. It:

1. Initializes a Next.js app and prepares it to handle HTTP requests.

2. Configures CORS dynamically for Socket.IO, allowing connections from localhost:3000 in development or all origins in production.

3. Sets up Socket.IO to handle real-time events like:

   • New file creation

   • File deletion

   • File updates

   • Client disconnection

4. Broadcasts events to all connected clients except the sender.

5. Starts the server on a specified port (default: 3000).

It’s a basic real-time server for file management with Next.js and Socket.IO.

Clubbing all components together

To do this we will have to tweak the page.tsx. Just copy the given code and paste it into the page.js

"use client";
import React, { useState, useEffect } from "react";
import { useCopilotAction, useCopilotReadable } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";
import ScreenOne from "./components/ScreenOne";
import FileExplorer from "./components/FileExplorer";
import LivePreview from "./components/LivePreview";
import io, { Socket } from "socket.io-client";

interface File {
  _id: string;
  name: string;
  content: string;
}

function Page() {
  const [files, setFiles] = useState<File[]>([]);
  const [currentFile, setCurrentFile] = useState<File | null>(null);
  const [code, setCode] = useState<string>("// Select or create a file");
  const [socket, setSocket] = useState<Socket | null>(null);
  const [fileContents, setFileContents] = useState<Record<string, string>>({});

  // Initialize socket connection
  useEffect(() => {
    const socketInstance = io("http://localhost:3000", {
      reconnection: true,
      reconnectionAttempts: 5,
      reconnectionDelay: 1000,
    });

    socketInstance.on("connect", () => {
      console.log("Connected to Socket.IO server");
    });

    // Handle real-time file updates
    socketInstance.on(
      "file-update",
      ({ fileId, content }: { fileId: string; content: string }) => {
        setFileContents((prev) => ({
          ...prev,
          [fileId]: content,
        }));

        if (currentFile && currentFile._id === fileId) {
          setCode(content);
        }
      }
    );

    socketInstance.on("new-file", (newFile: File) => {
      setFiles((prev) => [...prev, newFile]);
      setFileContents((prev) => ({
        ...prev,
        [newFile._id]: newFile.content,
      }));
    });

    socketInstance.on("delete-file", (fileId: string) => {
      setFiles((prev) => prev.filter((file) => file._id !== fileId));
      setFileContents((prev) => {
        const updated = { ...prev };
        delete updated[fileId];
        return updated;
      });
    });

    setSocket(socketInstance);

    return () => {
      if (socketInstance) {
        socketInstance.disconnect();
      }
    };
  }, [currentFile]);

useCopilotReadable({
description: "Current state of the workspace",
value: {
    files: files.map((f) => f.name),
    currentFile: currentFile?.name,
    currentCode: code,
},
});

  const fetchFiles = async () => {
    try {
      const response = await fetch("/api/files");
      if (!response.ok) throw new Error("Failed to fetch files");
      const data: File[] = await response.json();

      // Store all file contents in state
      const contents: Record<string, string> = {};
      data.forEach((file) => {
        contents[file._id] = file.content;
      });

      setFiles(data);
      setFileContents(contents);
    } catch (error) {
      console.error("Error fetching files:", error);
    }
  };

  useEffect(() => {
    fetchFiles();
  }, []);

  const handleFileSelect = async (file: File) => {
    setCurrentFile(file);

    // Use cached content if available
    if (fileContents[file._id]) {
      setCode(fileContents[file._id]);
    } else {
      try {
        const response = await fetch(`/api/files/${file._id}`);
        if (!response.ok) throw new Error("Failed to fetch file content");
        const data = await response.json();

        setFileContents((prev) => ({
          ...prev,
          [file._id]: data.content,
        }));
        setCode(data.content);
      } catch (error) {
        console.error("Error fetching file content:", error);
      }
    }
  };

  const handleCodeChange = async (value: string | undefined) => {
    if (!currentFile || !value) return;

    // Update local state immediately
    setCode(value);
    setFileContents((prev) => ({
      ...prev,
      [currentFile._id]: value,
    }));

    try {
      // Emit the change to other clients
      if (socket) {
        socket.emit("file-update", {
          fileId: currentFile._id,
          content: value,
        });
      }

      // Save to backend
      await fetch("/api/files", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: currentFile._id, content: value }),
      });
    } catch (error) {
      console.error("Error updating file:", error);
    }
  };

  const processFiles = async ({ response }: { response: string }) => {
    try {
      const filePattern =
        /FILE:\s*([\w.\-\/]+)\s*\nCODE:\s*([\s\S]*?)(?=\nFILE:|$)/g;
      let match;
      const newFiles: File[] = [];

      while ((match = filePattern.exec(response)) !== null) {
        const fileName = match[1].trim();
        const fileContent = match[2].trim();

        if (fileName && fileContent) {
          const res = await fetch("/api/files", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ name: fileName, content: fileContent }),
          });

          if (res.ok) {
            const savedFile: File = await res.json();
            newFiles.push(savedFile);

            // Update local state
            setFileContents((prev) => ({
              ...prev,
              [savedFile._id]: savedFile.content,
            }));

            // Emit new file to other clients
            if (socket) {
              socket.emit("new-file", savedFile);
            }
          }
        }
      }

      setFiles((prevFiles) => [...prevFiles, ...newFiles]);
      return `Files saved successfully: ${newFiles
        .map((f) => f.name)
        .join(", ")}`;
    } catch (error) {
      console.error("Error processing files:", error);
      return "Failed to save files.";
    }
  };

  useCopilotAction({
    name: "processFiles",
    description: "Processes AI-generated files and saves them to MongoDB",
    parameters: [{ name: "response", type: "string", required: true }],
    handler: processFiles,
  });

  return (
    <div className="h-screen flex bg-gray-100">
      <FileExplorer
        files={files}
        onFileSelect={handleFileSelect}
        currentFile={currentFile}
      />
      <div className="flex-1 flex flex-col p-4">
        <ScreenOne
          selectedFile={currentFile}
          code={code}
          onChange={handleCodeChange}
        />
      </div>
      <LivePreview
        files={files}
        currentFile={currentFile}
        code={code}
        onCodeChange={handleCodeChange}
      />
      <CopilotPopup
        instructions={`
    You are an AI-powered code generator. Use the following actions:

    1. @processFiles - To create new files, use this format:
    @processFiles(response: \`
    FILE: filename.ext
    CODE:
    [file content]
    \`)

    - Store new files in MongoDB using /api/files.
    - Then immediately fetch the files from database and show the files to FileExplorer
    - Correctly classify and separate different file types:
      - Static: HTML, CSS, JS
      - React: JSX, JS (React components)
    - For React projects:
      - Ensure the presence of index.js as the entry point.
      - Ensure there is a App.css file for styling
      - Ensure index.html contains a root <div id="root"></div>.
      - Separate components correctly (e.g., App.js, Header.jsx).
      - Include a package.json file with necessary React dependencies.
      - Ensure all React files follow ES6+ syntax and React best practices.

    2. @updateFile - To update existing files:
    @updateFile(filename: "file.ext", content: "new content")

    - Maintain compatibility with React environment.
    - Ensure any updated files do not break existing imports.
  `}
        labels={{
          title: "Project Assistant",
          initial: "What would you like to create?",
        }}
      />
    </div>
  );
}

export default Page;

Code explanation

1. State Management:

   • Tracks files (files), the currently selected file (currentFile), code in the selected file (code), real-time file contents (fileContents), and a socket connection (socket).

2. Socket.IO:

   • Establishes a connection to a server using Socket.IO, and handling real-time file updates like file creation, updates, and deletions.

   • Listens for events such as file-update, new-file, and delete-file to update the UI and propagate changes across users.

3. Fetching Files:

   • On component mount, it fetches all files from an API and populates the state with the files and their contents.

   • Upon selecting a file, the content is either retrieved from the cached state or fetched from the server.

4. Code Changes:

   • When code in the Monaco Editor is updated, the new content is saved locally and sent to the server and other connected clients via the socket.

5. File Processing by AI:

   • When AI generates code, the processFiles function parses the generated content, creates files on the backend, and updates the frontend. These files are stored in MongoDB and synchronized with the client via Socket.IO.

6. CopilotKit Integration:

   • Uses the useCopilotAction hook to integrate AI-driven file generation and updating functionality.

   • Provides instructions for creating and updating files via the CopilotPopup.

   • Always give detailed instructions to the CopilotPopup .

7. UI Components:

   • The UI includes components like FileExplorer, ScreenOne, and LivePreview, which displays files, allows editing, and provides a live preview of the code.

   • The CopilotPopup acts as an assistant to guide the AI in generating or updating files.

This setup creates a collaborative, real-time code editing environment with support for both static and React-based projects.

Configuring CopilotKit for the Whole App

This is going to be the last step of building the application. Navigate to the layout.tsx file and add this code:

import { CopilotKit } from "@copilotkit/react-core";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import { ReactNode } from "react";

export const metadata = {
  title: "Replit Clone",
  description: "Copilotkit Replit Clone",
};

// Define props type for RootLayout
interface RootLayoutProps {
  children: ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <body>
        <CopilotKit runtimeUrl="/api/copilotkit">{children}</CopilotKit>
      </body>
    </html>
  );
}

Here’s what’s going on in this code:

This code defines a RootLayout component, which serves as the root layout for a Next.js application. Here's a brief explanation:

Key Features:

1. CopilotKit Integration:

   • Wraps the entire application with the CopilotKit component from @copilotkit/react-core.

   • Configures the runtimeUrl to /api/copilotkit, which is the endpoint for handling Copilot-related functionality.

2. Global Styles:

   • Imports global CSS styles (globals.css) and CopilotKit UI styles (@copilotkit/react-ui/styles.css).

3. Metadata:

   • Sets metadata for the application (title: "Replit Clone", description: "Copilotkit Replit Clone").

4. Layout Structure:

   • Uses the html and body tags to structure the document.

   • Renders children (the rest of the application) inside the CopilotKit wrapper.

Some Important Notes

Designing and deploying a database can vary depending on the tools and requirements. For this project, I’ve chosen the simplest and most accessible approach.

Why CopilotKit?

CopilotKit is a powerful tool that converts natural language processing (NLP) queries into actionable backend code that runs on meta LLM. If you have an alternative that serves a similar purpose, feel free to use it. It effectively bridges the gap between natural language input and technical execution, making it an ideal choice for projects like this.

Why GroqCloud?

I selected GroqCloud because it’s free and offers access to multiple large language models (LLMs) with a single API key. While alternatives like ChatGPT are available, they may require paid plans. GroqCloud’s versatility and affordability make it the perfect fit for this tutorial.

Security Best Practices

Never expose your credentials publicly. Always store sensitive information like API keys in an .env file to keep your project secure.

Future Enhancements

While this tutorial focuses on setting up and working with React files, CopilotKit has a much broader range of capabilities that I will explain in the upcoming blog posts.

I aim to build at least 15 AI products in 2025.

Support for static files is coming soon.

As promised in the previous tutorial, I’ve implemented the CopilotKit CRUD feature in this tutorial as well.

In my next tutorial, I will demonstrate how to build something more cool with CopilotKit to create a more dynamic and functional application.

Playing with the Replit Clone

You can explore the live project via the following link and ask the chatbot to build something in React. Live Project Link.

For a deeper understanding of the code, check out the GitHub repository here: GitHub Repository.

Also, here’s a screenshot showcasing its practical use. In this example, instead of manually creating project files, you can simply ask the CopilotKit chatbot to generate those files for you. You can then edit and play around with them.

For example, you can give the CopilotKit chatbot commands like: “Create a React app”.

Handling Errors

• File Explorer Delays: Occasionally, due to database or Vercel deployment issues, files may be generated but not immediately visible in the File Explorer. In such cases, simply refresh the page, and the missing components will appear. This applies to all CRUD operations on files and their content as well.

• Real-Time Saving: Any changes you make to files are saved to the database in real-time, ensuring that your work is never lost.

• Command Errors: If the chatbot shows an error when processing your commands, simply retry the command until you receive a response.

• Adding Extra Files:To add new files to the current project, simply ask the chatbot:
  “Add a new file to the current project with the file name and extension.”

  For example: “Add a new file named readme.md in this project”

Video Demo

Conclusion

I hope you’ve enjoyed building this simple Replit AI clone. In this project, we used a MongoDB database, but the approach can easily be applied to other databases, as long as you can retrieve the data.

I plan to create many more projects involving AI and other cutting-edge tools. AI is truly a game-changer in the IT field, and I’m excited to share more insights and practical implementations of the latest technologies.

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 X: Prankur's Twitter

• Connect with me on LinkedIn: Prankur's LinkedIn

• Follow me on Github: Prankur’s Github

• View my Portfolio: Prankur's Portfolio

This sparked an idea. What if I could build a tool where I didn’t have to write SQL queries manually? Instead, I could type in plain, natural English and let the database do the heavy lifting for me.

Given that we live in the era of AI, leveraging artificial intelligence was the only way to turn this vision into reality.

In this tutorial, I’ll walk you through creating an AI-powered SQL query data extractor. This tool will enable you to fetch data from a database effortlessly, without writing a single line of SQL code.

What we’ll cover:

• Prerequisites & Tools

• How Does the App Work?

• How to Set Up Your Tools

• How to Set Up the Database

• Structure and Features of the App

• How to Build the Back End

• How to Build the Front End

• Some Important Notes

• Playing with the Database

• Conclusion

Prerequisites & Tools

In this tutorial, we’ll build an AI-powered SQL query data extractor tool. It’ll allow us to interact with a database using natural language, like plain English, and receive the same results as if we had written SQL queries.

Here’s an overview of the tools we’ll use to create this cool app:

Database

The database is a critical component where we’ll store data and later extract it for our AI model to use when performing NLP operations. Instead of hosting a database locally, I chose a cloud-based free database that allows data extraction via REST APIs. For this project, I opted for restdb.io because it offers seamless SQL database provisioning and supports REST APIs.

AI Agent

An AI Agent will act as the intermediary between the database and the AI model. This agent will manage the AI model’s operations and facilitate seamless communication. For this, I am using CopilotKit, which simplifies the integration process.

AI (LLM) Model

The AI model translates plain English queries into SQL queries. For this, I am using GroqAI, which supports various popular AI models and provides the flexibility needed for this project.

Next.js

To develop a web application that supports both frontend and backend functionalities, I chose Next.js. It’s an ideal framework for building robust, scalable web apps with server-side rendering capabilities.

Deployment

For deployment, you can choose any service. I prefer Vercel, as it integrates seamlessly with Next.js and is free for hobby projects.

By combining these tools, we’ll build a powerful, user-friendly application that effortlessly bridges natural language and SQL databases.

What We’ll Do Here:

These are the steps we’ll follow in this tutorial to build our app:

Step 1 – Set Up the Database: Either set up the database locally, deploy it, and access it, or use an online database tool that allows data access and extraction via REST APIs.

Step 2 – Obtain Cloud API Keys: Get the necessary API keys for your AI model to enable seamless integration.

Step 3 – Build a Web App: Create a web application and set up the backend to integrate CopilotKit. Configure it within the app for optimal functionality.

Step 4 – Train CopilotKit on Your Database: Provide your database’s data to CopilotKit. It will read and understand the data to facilitate natural language processing.

Step 5 – Integrate CopilotKit Chat: Add the CopilotKit chat interface into your application and configure it to ensure smooth operation.

Step 6 – Test Locally: Test the app on your local machine to identify and fix any issues.

Step 7 – Deploy the App: Once everything is working as expected, deploy the application to a hosting platform.

How Does the App Work?

Have you ever wondered how writing plain English could allow you to fetch data from a SQL database?

The magic lies in CopilotKit. It lets you create AI-powered copilots that can perform operations on your applications. Think of CopilotKit as your personal AI assistant or chatbot. So how does it work?

Well, first we have CopilotKit which serves as our chatbot powered by advanced AI models.

Then when you provide data to the chatbot, it uses that data to train itself, building an understanding of your database structure and content.

Finally, when a natural language query (like "Who is using this email address?") is inputted, the AI model processes it, translates it into a corresponding SQL query, and retrieves the desired data from the database.

With CopilotKit’s powerful AI capabilities, your application can seamlessly bridge natural language and SQL, making database interactions more intuitive.

How to Set Up Your Tools

Now we’ll go through everything you need to set up the project.

1. Install Next.js and dependencies:

First, you’ll need to create a NextJS app. Go to the terminal and run the following command:

npx create-next-app@latest my-next-app

Replace my-next-app with your desired project name.

Navigate to the project folder:

cd my-next-app

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000 to see your Next.js app in action.

2. Install CopilotKit and dependencies

Go to the project root folder through the terminal and run the below command. It will install all the important CopilotKit dependencies and other important packages like dotenv and Axios.

npm install @copilotkit/react-ui @copilotkit/react-core dotenv axios

• The CopitlotKit dependency is solely for handling CopilotKit operations and configurations.

• The Dotenv dependency is used to handle environment variables as we have to keep important keys in the project, such as environment variables.

• Axios is for handling the API calls.

3. Set Up the Database

Visit RestDB.io and either login or create an account.

Above you can see the login page for RestDB.io you can either log in if you already have an account or create a new account .

Once logged in you will redirected to this page. There you’ll see the button to create a new database.

When you click on the Create New button, a pop will appear. There, you’ll have to enter the database name as shown in the image below:

When you enter the database name, then click “Go”. I have put demosql as the database name. At this point, you’ll get your newly created database link as shown in the image below:

Now Click on the database URL it will take you to this page shown in the image :

Now it is time to make an API Key for accessing the database. To do this, click on Settings and it will take you to a new page shown below:

On this page click on the Add New button it will open a pop up shown below in the image:

Now you can configure your API actions here like GET, POST, PUT, and DELETE, name it whatever you want, and save it. Your database is now ready to interact via the REST API.

Copy the database URL and API KEY and put it into the .env file.

You can add tables, define the schema with columns and data types (for example, VARCHAR, INTEGER), and populate data manually or via uploads (Excel, CSV, or JSON). For this project, we’ve added 21 records.

4. Set Up the LLM for Action:

This part is pivotal for the project, as we’re setting up the LLM (Large Language Model) to handle the conversion of NLP (plain English) queries into SQL queries.

Numerous LLMs are available in the market, each with its strengths. While some are free, others are paid, which made selecting the right one for this project a challenge.

After extensive experimentation, I chose the Groq Adapter because:

• It consolidates various LLMs under a single platform.

• It provides access through a unified API key.

• It’s compatible with CopilotKit.

How to Set Up Groq Cloud

To get started with Groq Cloud, visit its website and either login if already have an account or create a new account if you’re new. Once logged in, navigate to the Groq Dashboard.

This is the homepage of groq cloud:

Once logged in, a new page will open that’ll look like this:

As you can see, the sidebar has an API Keys link. Click on it, and it will open a new page as shown in the image below. You can also select any LLM of your choice which is given at the top right before the view code option.

Here, click on the Create API Key button it will open a pop up like you see below. Just enter the name of your API key and click on Submit it will create a new API key for you. Then copy this API key and paste it inside your .env file.

To enable seamless access to various LLMs on Groq Cloud, generate an API key by going to the Groq API Keys section. Create a new API key specifically for the LLM, ensuring that it is properly configured.

With the LLM set-up and all components ready, you are now prepared to build the project.

Structure and Features of the App

We will approach this project in a straightforward way, focusing on simplicity and functionality. The primary goal is to create a basic webpage that allows us to:

• Verify if our API calls were successful.

• View the data received from the API.

• Interact with the CopilotKit chatbot integrated into the front end.

Webpage Structure

Since we have already set up the Next.js app, the next step is to build a minimalistic webpage comprising:

1. Header Section: Displays the title of the application.

2. Main Area:

   • Tables: Show the data fetched from the database.

   • Status Indicators: Show the status of API calls and database operations. If there are any issues, such as API or database failures, errors will be displayed in red text for clarity.

Key Features

• Error Handling: Any failures, such as API or database issues, will be clearly marked with red text for immediate visibility.

• Data Presentation: For demonstration purposes, the entire database will be displayed in neatly structured tables.

• CopilotKit Chatbot Integration: This chatbot will be configured to allow natural language interactions with the database. The blue-colored ball on the page represents the CopilotKit chatbot. This chatbot is the key interface for interacting with the database.

  • Using natural language queries, we can ask questions about the database data.

  • The chatbot processes these queries, converts them into SQL queries, and fetches the results seamlessly.

The frontend will look something like this:

How to Build the Back End

Before we start building the back end, you’ll need to put all important credentials into your .env file which will look something like this:

NEXT_PUBLIC_COPILOTKIT_BACKEND_URL=http://localhost:3000/api/copilotkit
NEXT_PUBLIC_GROQ_CLOUD_API_KEY=
NEXT_PUBLIC_RESTDB_API_KEY=
NEXT_PUBLIC_RESTDB_BASE_URL=https://demosql-fdcb.restdb.io/rest/demo-data

So what are all these? Let’s go through them one by one:

1. NEXT_PUBLIC_COPILOTKIT_BACKEND_URL=http://localhost:3000/api/copilotkit: This specifies the base URL for the CopilotKit backend API.

   • The NEXT_PUBLIC_ prefix makes this variable accessible both on the server side and in the client-side code of a Next.js application.

   • The value http://localhost:3000/api/copilotkit indicates the API is running locally during development.

2. NEXT_PUBLIC_GROQ_CLOUD_API_KEY=: This variable is intended to store an API key for a GROQ Cloud service. GROQ Cloud could be related to querying or data processing you will have to paste your own Groq API key.

   • The variable is empty, indicating the API key is not set yet. It will likely need to be filled in with the appropriate value before the application can access the GROQ Cloud service.

3. NEXT_PUBLIC_RESTDB_API_KEY=: Intended to hold the API key for accessing a RESTdb service. You will have to paste your own Groq API key.

   • RESTdb is a database service that provides APIs for database interactions.

   • The variable is also empty, meaning the key must be filled in with a valid API key for the application to authenticate and interact with the RESTdb service.

4. NEXT_PUBLIC_RESTDB_BASE_URL=https://demosql-fdcb.restdb.io/rest/demo-data: Defines the base URL for interacting with the RESTdb database. This URL will be created when you make your database. Here, I have given the URL of my database.

   • The value https://demosql-fdcb.restdb.io/rest/demo-data points to a specific RESTdb database endpoint called demo-data.

   • This could be the endpoint where the application fetches or manipulates demo data for testing or development.

We have successfully added the environment variables to our project. Now, it’s time to configure the CopilotKit API backed.

How to Configure the CopilotKit Back End

Open your Next.js app in any code editor – I prefer VSCode – and go to the root folder, which looks like this:

Inside the app folder, make a new folder called api. Inside the API folder, make another folder called copilotkit. Then in there, make a new file called route.js and inside the file paste this code:

import {
  CopilotRuntime,
  GroqAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";

import Groq from "groq-sdk";

const groq = new Groq({ apiKey: process.env.NEXT_PUBLIC_GROQ_CLOUD_API_KEY });
console.log(process.env.NEXT_PUBLIC_GROQ_CLOUD_API_KEY);
const copilotKit = new CopilotRuntime();

const serviceAdapter = new GroqAdapter({
  groq,
  model: "llama-3.1-70b-versatile",
});

export const POST = async (req) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime: copilotKit,
    serviceAdapter,
    endpoint: "/api/copilotkit",
  });

  return handleRequest(req);
};

Here’s a detailed explanation of each part:

This code defines a server-side handler for a Next.js API route using CopilotKit and Groq SDKs. It sets up a runtime environment to process requests to a specified endpoint.

1. Imports:

import {
  CopilotRuntime,
  GroqAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";

import Groq from "groq-sdk";

• CopilotRuntime and GroqAdapter: These are classes from the CopilotKit library used to set up and configure the runtime environment and adapters for AI-based services.

  • CopilotRuntime: A runtime environment to manage the CopilotKit operations.

  • GroqAdapter: Adapts and connects a Groq service (used for querying or data processing) with CopilotKit.

• copilotRuntimeNextJSAppRouterEndpoint: A utility function to create a handler for a Next.js App Router API endpoint that integrates CopilotKit.

• Groq from "groq-sdk": A library for interacting with Groq services is initialized here for querying or processing data.

2. Initialize Groq:

const groq = new Groq({ apiKey: process.env.NEXT_PUBLIC_GROQ_CLOUD_API_KEY });
console.log(process.env.NEXT_PUBLIC_GROQ_CLOUD_API_KEY);

• Groq Initialization:

  • The Groq an object is created with an API key (NEXT_PUBLIC_GROQ_CLOUD_API_KEY) fetched from environment variables.

  • This key authenticates the app with the Groq Cloud service.

• console.log(process.env.NEXT_PUBLIC_GROQ_CLOUD_API_KEY): Logs the API key to the server console. Note: Avoid logging sensitive data in production to ensure security.

3. Initialize CopilotKit Runtime

const copilotKit = new CopilotRuntime();

• CopilotRuntime Initialization: Creates an instance of CopilotKit's runtime environment to manage CopilotKit's features and services.

4. Configure Service Adapter

const serviceAdapter = new GroqAdapter({
  groq,
  model: "llama-3.1-70b-versatile",
});

• GroqAdapter:

  • Configures an adapter to connect CopilotKit with Groq.

  • The model parameter specifies the AI model to use. Here, it is "llama-3.1-70b-versatile", a versatile language model with 70 billion parameters.

5. Exported POST Handler

export const POST = async (req) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime: copilotKit,
    serviceAdapter,
    endpoint: "/api/copilotkit",
  });

  return handleRequest(req);
};

• Defines a POST handler for a Next.js App Router API endpoint.

• Key Components:

  1. copilotRuntimeNextJSAppRouterEndpoint:

     • Sets up the handler for the /api/copilotkit endpoint.

     • Takes runtime (CopilotKit) and serviceAdapter (GroqAdapter) as inputs to configure the endpoint's behaviour.

  2. handleRequest:

     • A function that processes incoming HTTP requests (in this case, POST requests).

     • This allows the CopilotKit runtime and service adapter to handle requests dynamically.

• return handleRequest(req);: Invokes the handler and processes the incoming request (req), returning the appropriate response.

How it all works:

1. The Groq SDK is initialized with an API key for authentication.

2. A CopilotKit runtime is set up.

3. A GroqAdapter connects the runtime to the Groq service with a specified AI model.

4. The /api/copilotkit endpoint is configured to handle POST requests, pass the requests to CopilotKit's runtime, and return the processed response.

With this setup, you have successfully integrated CopilotKit into your Next.js application. The backend is now fully functional, enabling seamless communication with the database via REST APIs and the CopilotKit interface.

How to Build the Front End

For the front end, we’ll keep it as simple as we can. We just need a few things to get this project done: we need a Header component and a Table component.

1. Header component: To display the title or description of the application.

2. Table component: To visualize the data fetched from the database.

To achieve this, we’ll use ShadCN, a popular frontend component library known for its clean design and ease of use.

ShadCN provides pre-built components that help speed up development without compromising on quality. By leveraging this library, we can focus on functionality while ensuring the UI looks polished and professional.

How to Install ShadCN in a Next Project

Run the following command to install ShadCN components:

npx shadcn@latest init

This command:

• Initialize ShadCN in your project.

• Creates a components folder for storing ShadCN components.

• Updates the tailwind.config.js file with required configurations.

You will be asked a few questions to configure components.json:

Which style would you like to use? › New YorkWhich 
color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yesadd components

To add specific components, use the following command:

npx shadcn@latest add <component-name>

For example, to add a table component:

npx shadcn@latest add table

The components folder now contains a ready-to-use button component.

In the frontend, we have a components folder that contains the Table component. This component is responsible for displaying the database data in a structured tabular format.

Apart from the Table component, there are two additional files in the front end. These files serve different purposes and will be integrated later in the project for specific functionalities.

This modular structure ensures the front end remains clean and organized, making it easier to manage and expand as needed.

Let’s explore each file:

1. Table.jsx: This file is auto-generated by ShadCN when we installed the Table component. It contains the default configuration for the table component provided by the ShadCN library. Do not modify this file, as it is essential for the component’s proper functionality.

2. Tabledata.jsx: This file is where we populate the table with data fetched from the database through API calls. The Tabledata.jsx file bridges the gap between the backend API and the frontend table display.

Let’s take a closer look at the code:

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

export function Tabledata({ data }) {
  return (
    <Table className="text-center">
      <TableCaption className="text-sm text-green-600 font-bold ml-8">
        Live data from database.
      </TableCaption>
      <TableHeader>
        <TableRow className="text-center ">
          <TableHead>Id</TableHead>
          <TableHead>name</TableHead>
          <TableHead>email</TableHead>
          <TableHead>phone_number</TableHead>
          <TableHead>address</TableHead>
          <TableHead>city</TableHead>
          <TableHead>state</TableHead>
          <TableHead>zip_code</TableHead>
          <TableHead>country</TableHead>
          <TableHead className="text-right">created at </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map((db) => (
          <TableRow key={db._id}>
            <TableCell className="font-medium text-wrap w-12">
              {db._id}
            </TableCell>
            <TableCell className="font-medium">{db.name}</TableCell>
            <TableCell>{db.email}</TableCell>
            <TableCell>{db.phone_number}</TableCell>
            <TableCell className="text-right">{db.address}</TableCell>
            <TableCell className="text-right">{db.city}</TableCell>{" "}
            <TableCell className="text-right">{db.state}</TableCell>
            <TableCell className="text-right">{db.zip_code}</TableCell>{" "}
            <TableCell className="text-right">{db.country}</TableCell>
            <TableCell className="text-right">{db.created_at}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

This code renders a styled, dynamic table with data passed from a database or API.

• Imports: Uses custom table components (Table, TableRow, TableCell, and so on) from @/components/ui/table.

• Props: Accepts a data prop, an array of objects representing table rows.

• Table Caption: Displays a caption, "Live data from database," styled with Tailwind CSS.

• Table Header: Defines column headers such as Id, name, email, and more.

• Dynamic Rows: Maps over the data array to generate TableRow elements dynamically, using _id as the unique key.

• Data Cells: Displays object fields (_id, name, email, and so on) in TableCell components with custom styles.

• Tailwind CSS: Styles applied for alignment, font weight, and spacing.

NLQueryForm.jsx

In this file, we handle the API calls, define CopilotKit actions, and pass the fetched data to the Table component. This file acts as the central logic hub for connecting the backend API, AI actions, and the frontend display.

Key functionalities of NLQueryForm.jsx:

1. API integration: Fetches data from the database and handles errors or loading states.

2. CopilotKit actions: Defines AI actions that allow querying and interacting with the database using natural language.

3. Data passing: Sends the processed data to the Table component for display.

Below is the code:

"use client";
import React, { useState, useEffect } from "react";
import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";
import axios from "axios";
import { Tabledata } from "./Tabledata";

function NLQueryForm() {
  const [nlQuery, setNlQuery] = useState("");
  const [data, setData] = useState([]);
  console.log("🚀 ~ NLQueryForm ~ data:", data);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);

  const API_KEY = process.env.NEXT_PUBLIC_RESTDB_API_KEY;
  const BASE_URL = process.env.NEXT_PUBLIC_RESTDB_BASE_URL;
  console.table({ API_KEY, BASE_URL });
  useEffect(() => {
    async function fetchData() {
      if (!API_KEY || !BASE_URL) {
        setError("API configuration is missing");
        setLoading(false);
        return;
      }
      try {
        const response = await axios.get(BASE_URL, {
          headers: {
            "x-apikey": API_KEY,
            "Content-Type": "application/json",
          },
        });
        setData(response.data);
        setLoading(false);
      } catch (error) {
        console.error("Error fetching data:", error);
        setError(
          error instanceof Error ? error.message : "An unknown error occurred"
        );
        setLoading(false);
      }
    }
    fetchData();
  }, [API_KEY, BASE_URL]);

  useCopilotReadable({
    description: "Query database with detailed information",
    value: JSON.stringify(data.slice(0, 25)),
  });
  useCopilotAction({
    name: "fetchData",
    description: "Search and filter data based on natural language query",
    parameters: [
      {
        name: "nlQuery",
        type: "string",
        description: "Natural language search term for database",
        required: true,
      },
    ],

    handler: async ({ data }) => {
      setNlQuery(data);
      return JSON.stringify(data);
    },
  });

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {error && <p style={{ color: "red" }}>{error}</p>}
      <div>
        <p className="text-sm text-green-600 font-bold text-center">
          Live data from database.
        </p>
        <p className="text-sm text-green-600 font-bold text-center">
          Total Records: {data.length}
        </p>
        <Tabledata data={data} />
      </div>
    </div>
  );
}
export default NLQueryForm;

Here’s a detailed explanation of the NLQueryForm component:

Imports and Dependencies:

• Utilizes React for state management (useState) and side effects (useEffect).

• Imports axios for HTTP requests.

• Imports useCopilotReadable and useCopilotAction from @copilotkit/react-core to integrate CopilotKit functionality.

• Imports a custom Tabledata component for rendering data.

Component Setup:

• Defines a functional React component NLQueryForm.

• Initializes state variables:

  • nlQuery: Holds the natural language query input.

  • data: Stores fetched data from the API.

  • error: Stores any errors that occur during data fetching.

  • loading: Tracks the loading state of the component.

API Configuration:

• Fetches API keys and base URL from environment variables (NEXT_PUBLIC_RESTDB_API_KEY and NEXT_PUBLIC_RESTDB_BASE_URL).

• Logs these values for debugging purposes using console.table.

Data Fetching:

• Uses useEffect to fetch data from the API on the initial render.

• Makes a GET request to the API using axios with required headers.

• Updates data with the response and stops the loading state.

• Handles errors by logging them and updating the error state.

CopilotKit Integration:

• useCopilotReadable: Exposes a readable description and a slice of the first 25 records of data.

• useCopilotAction: Defines a CopilotKit action named fetchData which:

  • Accepts a natural language query (nlQuery) as input.

  • Updates the nlQuery state and returns it as a string.

Conditional Rendering:

• Displays a loading message (Loading...) if loading is true.

• Displays an error message in red text if an error occurs.

Rendering:

• Shows a message indicating live data and the total record count.

• Passes the data state to the Tabledata component for rendering.

Export:

• Exports the NLQueryForm component as the default export.

Page.js

Now go to the page.js file inside the app folder and add this code:

•   "use client";
  
    import NLQueryForm from "@/components/ui/nl-query-form";
    import { CopilotPopup } from "@copilotkit/react-ui";
  
    export default function Home() {
      return (
        <div className="min-h-screen bg-background">
          <header className="bg-primary text-primary-foreground py-6">
            <div className="container">
              <h1 className="text-3xl font-bold">
                Natural Language SQL Query Builder
              </h1>
            </div>
          </header>
          <main className="container py-8">
            <NLQueryForm />
          </main>
  
          <CopilotPopup
            instructions={
              "You are assisting the user as best as you can. Answer in the best way possible given the data you have."
            }
            labels={{
              title: "Popup Assistant",
              initial: "Need any help?",
            }}
          />
        </div>
      );
    }
  

Here’s a simple explanation of the code above:

• Client-Side Rendering:

  • "use client"; indicates the file is using React's client-side rendering.

• Importing Components:

  • NLQueryForm is imported from a local component directory to be used in the app.

  • CopilotPopup is imported from the @copilotkit/react-ui package for displaying an interactive popup.

• Main Function:

  • Home is a React functional component that defines the UI for the home page.

• Page Layout:

  • A full-page container (min-h-screen) with a background color (bg-background) wraps all content.

• Header:

  • Contains a title with the text "Natural Language SQL Query Builder".

  • Styled with a primary background and text colors (bg-primary, text-primary-foreground).

• Main Content:

  • Renders the NLQueryForm component inside a container with padding (py-8).

• Popup Component:

  • Adds a CopilotPopup at the bottom with:

    • Instructions: Describes the assistant's role.

    • Labels: Includes a title and initial message for the popup.

• Purpose:

  • The page is designed to let users interact with a natural language SQL query builder and receive assistance via a popup.

Configuring CopilotKit for the Whole App

This is going to be the last step of building the application. Navigate to the layout.js file and add this code:

import "./globals.css";
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-ui/styles.css";
export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <CopilotKit runtimeUrl="/api/copilotkit">{children}</CopilotKit>
      </body>
    </html>
  );

Here’s what’s going on in this code:

• Imports:

  • ./globals.css: Imports global CSS styles for the application.

  • @copilotkit/react-core: Imports the core functionality of CopilotKit.

  • @copilotkit/react-ui/styles.css: Includes predefined styles for the CopilotKit UI components.

• Metadata:

  • The metadata object defines the app's title and description, which are useful for setting meta tags in the generated HTML for SEO and user information.

• RootLayout function:

  • This function serves as the root layout wrapper for the application. It ensures consistent structure across all pages and integrates the CopilotKit runtime.

• Structure:

  • The layout returns an <html> element with a lang attribute set to en for English.

  • Inside the <body> tag, the CopilotKit component is wrapped around the children prop.
    This setup:

    • Connects the app to the CopilotKit runtime using the API endpoint /api/copilotkit.

    • Provides access to CopilotKit's functionality, such as handling natural language queries, throughout the application.

Some Important Notes

Designing and deploying a database can take various forms, depending on the tools and requirements. For this project, I have chosen the simplest and most accessible approach.

Why CopilotKit?

CopilotKit is a powerful tool that converts NLP queries into actionable backend code. If you have an alternative that works similarly, feel free to use it. It bridges the gap between natural language input and technical execution, making it ideal for projects like this.

Why GroqCloud?

I selected GroqCloud because it’s free and provides access to multiple LLMs with a single API key. While you can opt for alternatives like ChatGPT, note that they may require paid plans. GroqCloud’s versatility and affordability make it perfect for this tutorial.

Database Considerations

The size of your database can vary from very small to enormous. However, interacting with the database depends on the token limits of the LLM you’re using.

Since I’m working with free-tier tools, my focus is on a small database to ensure seamless interactions.

Security Best Practices

Never expose your credentials publicly. Always store sensitive information like API keys in an .env file to keep your project secure.

Future Enhancements

While this tutorial focuses on setting up and querying a database, the potential of CopilotKit extends to CRUD operations (Create, Read, Update, Delete). In my next tutorial, I will demonstrate how to implement full CRUD operations using CopilotKit for a more dynamic and functional application.

Playing with the Database

You can explore the live project via the following link and ask any questions related to the database data: live link .

For a deeper understanding of the code, here’s the GitHub repository link: github .

Also, here’s a screenshot demonstrating its practical use. In this example, instead of writing a plain SQL query like SELECT * FROM demo_data WHERE email = 'riverashannon@lee.com'; to extract the name of the person, we used an NLP query to achieve the exact same result.

Conclusion

I hope you’ve enjoyed building this simple AI chatbot to interact with the database. In this project, we’ve used a simple SQL database, but you can apply this approach to any database as long as you can retrieve the data.

In the future, I plan to implement many new projects involving AI and other tools. AI tools are truly game-changing in the IT field, and I look forward to providing you with more detailed insights and practical implementations of the latest tools emerging in the space.

So this is the end from my side. If you found this article useful, then do share it and connect with me – I am open to opportunities:

• Follow Me on X: Prankur's Twitter

• Follow me on LinkedIn: Prankur's Linkedin

• Look at my Portfolio here: Prankur's Portfolio

Once the design phase is complete, the focus shifts to UI development, where tools like HTML, CSS, and JavaScript come into play. At a higher level, libraries like React and Vue streamline the development process.

Regardless of the application type, your code can almost always be broken down into components.

“Repeated components are a nightmare to manage.” – Every frustrated UI developer

Imagine having a component library where all commonly used elements are pre-built and responsive—how much easier and faster would that make development?

In this article, I’ll show you how to build your own component library, using a minimal tech stack, and then use it to build an application.

What We’ll Cover

1. Prerequisites

2. Why Build a Component Library?

3. How to Build the Component Library

4. Let’s Build the Library

   • Step 1: Design the Layout using Pen and Paper

   • Step 2: Design the Components in HTML and CSS

   • Step 3: Hosting the Project CSS File

5. FAQ

6. Conclusion

Prerequisites

• Proficiency in HTML, CSS, and JavaScript: A solid understanding of front-end development fundamentals is essential.

• Basic Deployment Skills: Familiarity with deploying applications on platforms like Netlify or Vercel is required.

• Git/GitHub Knowledge: You should be comfortable with version control, including basic Git commands and managing repositories on GitHub.

Why Build a Component Library?

Every website is built from components, which are structured with HTML and styled using CSS.

HTML and CSS are fundamental technologies for creating visually appealing web pages. However, mastering them can be challenging due to the wide array of HTML tags and CSS properties.

To simplify the process, developers often use component libraries, which deliver various benefits:

1. Faster Development: Pre-built components and responsive design features accelerate the development process.

2. Consistency: Ensures uniform styling and cross-browser compatibility across the application.

3. Maintainability: Encourages structured, modular code, making it easier to maintain and scale.

4. Community Support: extensive documentation, plugins, and a strong community provide valuable resources.

5. Customization and Accessibility: offers easy customization and accessibility-focused components for inclusive designs.

How to Build the Component Library

Building a component library involves several key steps. First, I’ll give you an overview of each step we’ll take to create the component library. After that, we’ll build it together.

1. Design the Layout of the Components

Before writing any code, it’s crucial to have a clear vision of what you want to build. Start by sketching the layout of your components on paper, or use design tools like Figma or Canva to create a visual representation.

Having a visual guide will streamline your coding process and help you stay focused as you translate designs into code.

2. Write the Component Structure in HTML

Once the design is ready, the next step is to structure your components in HTML. This creates the foundation of your webpage, as HTML is the backbone of any web project.

Pro-tip: Use semantic HTML to improve user accessibility and SEO. For example, use <article>, <section>, or <header> tags instead of generic <div> elements when appropriate.

3. Style the Components with CSS

With the HTML structure in place, you can begin styling the components using CSS. Apply styles like background colours, font sizes, link decorations, and button styles using CSS classes and IDs.

CSS is a powerful tool—you can even add beautiful animations. But in this tutorial, we’ll focus on utilizing the essential properties of CSS to create clean, functional designs.

4. Host the Project's CSS File

Once your component library is ready, you’ll want to make it accessible for future projects. Hosting your CSS file on platforms like Netlify, GitHub Pages, or Vercel allows you to use the components across different projects by simply linking to the global CSS file.

By following these four steps, you’ll create a reusable component library that helps you build beautiful websites efficiently and effectively.

Let’s Build the Library

I began my journey as a software developer by diving into HTML and CSS to design webpages. These foundational technologies are essential for any web developer, but mastering them can be challenging—HTML boasts 152 tags, while CSS has over 200 properties.

While you won’t need to use every single HTML tag or CSS property, knowing the core concepts requires significant time and effort. .

Now, let’s consider a scenario: if I asked you to create a small website or a landing page without using any component library, how would you approach it? My goal is to minimize the time spent on designing.

Imagine if there was a way to automate the design process, allowing you to achieve beautiful results without sacrificing flexibility. This is where a component library comes into play. By writing your components in pure vanilla CSS once, you can reuse them across any project.

I encourage you to pursue this approach because it will provide real-time experience with HTML and CSS while helping you learn a multitude of concepts simultaneously.

I developed a small library consisting of 10+ beautiful components, which you can explore here: SlateUi. This library has helped deepen my understanding of web technologies.

My goal was to understand HTML and CSS thoroughly. After completing one project, I wanted to feel confident in all the critical aspects of web design, from UI to code.

By designing and developing these components, I gained greater control and customization options tailored to specific requirements.

The learning process was also incredibly rewarding. Creating each component took considerable time, but the exposure I gained to these two technologies significantly boosted my confidence.

Additionally, this approach helps avoid the redundancy of writing repetitive CSS code for similar elements.

Step 1: Design the Layout using Pen and Paper

First, you’ll want to create a basic layout for the webpage. This is just initial sketching so that you know what you have to build in your project

The layout consists of three key elements:

a) Header
b) Card(s)
c) Footer

Each component includes distinct colours, text, and additional elements. Here’s what it looks like in our example:

In an actual project, you typically start with prepared design models created in tools like Figma or other UI design software.

For this project, I used Canva to design the layout. This initial design phase is crucial as it lays the foundation for core feature development.

Then, you’ll write the structure of the component in HTML. At this level, I will simply put our HTML elements in such a way so that we can prepare a basic skeleton of the webpage as we have designed it. In the header I have a logo and some navigation links, in the cards I have a button and an image; and in the footer, I have some more links.

Step 2: Design the Components in HTML and CSS

At this point, we’ll enhance the components we created with HTML by applying CSS properties to beautify them. This stage involves using CSS to set background colours, primary colours, link decorations, button styles, and more. We’ll do this by utilizing CSS classes and IDs.

So far, we’ve built three components:

a) Header with navigation links
b) Footer
c) Horizontal Cards with action buttons

Now, let’s begin by building the first component: the Header.

The header component:

The header is at the top of a page or a section. It usually contains a logo, search bar, navigational links, and so on.

The footer component:

The Footer defines the footer or bottom of a web page or a section. Usually, it contains copyright information, contact details, navigation links, and so on.

The card component:

The card component can house various types of content, including a heading, image, main content, and a footer that features a call-to-action button.

Cards are designed to serve specific purposes, such as showcasing e-commerce products, displaying news items, or serving multiple other functions across different contexts.

Combining it all together:

By clicking the button, the card data will update with random cat facts, along with the length of each fact.

Note: I used an open-source API for this project. If the content does not update on the card, it may be due to an API outage.

Now, have you checked the CSS code?

You might be wondering why I’ve imported just a single line of code into my CSS file. Well, I have combined the CSS files of all three parts of the layout (header, footer, & cards components) into one CSS file and hosted the file on Netlify. This is the URL that is holding all three CSS files:

@import url("https://hashnodeblogchallenge.netlify.app/index.css");

It serves the CSS in all three components and maintains the styles for all three components.

Step 3: Hosting the Project CSS File

Finally, I’ve arrived at the most crucial part of this project, where all the magic happens.

Currently, I have three CSS files for each of the web components: header, cards, and footer.

Since our project is small, I will combine all CSS file code into one CSS file to get one CSS file which will work as a universal CSS file.

The process of hosting the CSS file is straightforward. Here's a detailed breakdown of what you need to do:

1. Push Your Code to GitHub

You need to push (upload) your project files, including the HTML, CSS, and other assets, to a GitHub repository. Here’s how you can do that:

1. Initialize a Git repository in your project directory using git init.

2. Add all your files using git add ..

3. Commit the files with git commit -m "Initial commit".

4. Link to a GitHub repository you’ve created using git remote add origin <repo-url>.

5. Finally, push your code using git push -u origin main.

6. Result: Your project files will now be hosted in your GitHub repository.

2. Open Netlify and Log In or Sign Up

Then, visit Netlify and either sign in if you already have an account or create a new one.

You can sign up using your GitHub credentials or a separate email. This step gives you access to Netlify's web hosting services, which will allow you to deploy your project directly from GitHub.

3. Connect Your GitHub Repository That Contains Your Code

Once logged in, you'll connect your GitHub repository to Netlify.

1. On Netlify, click on "New site from Git".

2. Choose GitHub as the source.

3. Authorize Netlify to access your GitHub account.

4. Select the repository that contains your project from the list.

5. Configure build settings if necessary (though for simple static sites, Netlify automatically detects them).

4. Click "Deploy"

After connecting your repository, Netlify will display a "Deploy" button.

1. Click "Deploy" to trigger the build and deployment process.

2. Netlify will pull your code from GitHub, build the site (if needed), and deploy it to a live URL.

Your project is now live on the web, and you’ll be provided with a URL where you can access the deployed site.

5. Access the Deployed URL and Append the CSS File URL

You’ll access the deployed site by visiting the URL provided by Netlify and directly referencing the CSS file you uploaded.

1. Once your site is deployed, note down the provided URL (for example, https://example.netlify.app).

2. To access a specific CSS file, append the file name to the URL, for example: https://example.netlify.app/styles.css.

3. Here, styles.css is the name of your CSS file that you uploaded to GitHub and deployed via Netlify.

This will allow you to view or reference the CSS file directly through a public URL.

This process essentially helps you host your project and its assets on Netlify, allowing easy access to any file (like filename.css) that you uploaded to GitHub. You can use these public links in your projects or share them.

And that’s it! Link this URL to your project's CSS file.

I have hosted the main CSS file on the Netlify app so that it can be accessed anywhere simply by importing it into your project. Here is the URL of my hosted CSS file: https://hashnodeblogchallenge.netlify.app/index.css.

The beauty of component libraries is that they allow you to focus on development rather than design.

FAQ

What Benefits Have We Gained from This?

Now, you simply need to copy the HTML code and import the CSS file into your project. Here are the key benefits:

• Reduces time spent on repetitive CSS coding.

• Provides greater control over components, allowing for customization based on your needs.

• Offers real-time experience with HTML and CSS, enabling you to learn core concepts effectively.

What if I Want to Change Something?

This is straightforward. Just edit your CSS file and update the header colour from black to blue where you have declared that header class or ID.

What if I Want to Create More Components?

You can create as many components as you need! Just store the style code in the same hosted CSS file, and everything will work seamlessly.

How Does This Save Me Time?

Imagine you need to create 5 websites, each with 5 pages (that’s a total of 25 pages). If you identify common elements, such as headers and footers, that will be used across all 25 pages, you can avoid writing 25 separate components. Instead, you can simply use the components from your library—just copy and paste the HTML and add the CSS file.

What Lets the Entire App Function with Just One Line of CSS?

The concept is quite simple and can be broken down into the following steps:

1. Create components based on your requirements.

2. Control their design with CSS and apply the necessary properties.

3. Host your main CSS file somewhere to obtain a new URL, which you can use to import your CSS styles in HTML.

Now you can calculate how much time you have saved.

Conclusion

Creating a component library using HTML and CSS allows you to build beautiful web pages quickly and effectively.

It also provides you with a deep understanding of HTML and CSS, which are essential skills for a successful software development career. With these skills, you'll be able to create engaging layouts without spending excessive time coding from scratch.

To help you get started, here’s an example of a component library I developed, which includes 10+ beautiful components: SlateUI.

Now, you simply need to copy the HTML code and paste it where you want to display your components, along with importing your CSS file URL into that HTML file.

So guys this is the end from my side. If you find this article useful, then do share it and connect with me – I am open to opportunities:

• Follow Me on X: Prankur's Twitter

• Follow me on LinkedIn: Prankur's Linkedin

• Look at my Portfolio here: Prankur's Portfolio

In a previous article, I talked about various React Hooks and how they work along with code samples and detailed explanations.

In this guide, I’m going to talk about some important things that I’ve learned while developing React apps. And these learnings are optimized based on using React Hooks. We’ll debunk some common myths, simplify common concepts, and optimize your code for the best performance.

What we’ll cover:

• How Will This Guide Benefit You?

• Prerequisites

• React State Must Be Immutable

• Don't Use State for Everything

• Derive Values Without State

• Compute Values Without Effects

• Keys Should Be Unique

• Use useEffect Last

• Conclusion:

How Will This Guide Benefit You?

Let’s say you have a knife and I ask you to cut out some shapes from a piece of cloth. You could do it, but it would take a while and be challenging using a knife. Instead, what if I gave you a pair of really sharp scissors and then asked you to cut out the patterns? It’d be much easier, right?

This guide is like that optimised approach of cutting cloth with scissors instead of a knife. I’ll teach you how to use React more easily, without as much struggle. We’ll discuss the important aspects of how React Hooks work, and we’ll also cover some do’s & don’ts.

Prerequisites

There is only one main prerequisite for following this guide: you should have used React hooks at least once. And by this I mean developed an application with React that leverages the power of hooks.

This article is for everyone who wishes to use React hooks to their full potential.

React State Must Be Immutable

Have you ever wondered why React makes such a fuss about immutability? 🤔 As a newbie, you might think that JavaScript's mutations are perfectly fine. After all, we add or remove properties from objects and manipulate arrays with ease.

But here's the twist: in React, immutability isn't about never changing state, it's about ensuring consistency.

When you mutate state directly, React can’t detect changes reliably. This means your UI might not update as expected. The trick? Replace old data with new copies.

For instance, if you need to add a user, you should create a new array with the new user included, rather than pushing directly into the existing array.

const updatedUsers = [...users, newUser];

The code const updatedUsers = [...users, newUser]; uses the spread operator to create a new array, updatedUsers, which combines the existing users with newUser.

This approach maintains immutability in React by not modifying the original users array. Instead, it creates a new state representation, allowing React to optimize rendering and ensure predictable state changes. When you update the state using setUsers(updatedUsers);, React re-renders the component based on this new array, adhering to best practices for state management.

This ensures React detects the change and re-renders your component smoothly.

Don't Use useState for Everything

Confession time: I used to throw everything into useState without thinking twice. 🚀 But here's the scoop: not everything needs to be in state. The state is powerful, but overusing it can lead to complex and inefficient code.

Consider alternatives like server state, URL state, or local storage. For server data, libraries like React Query are a game changer. They handle fetching and caching so you don’t have to manage it manually. For URL state, leverage hooks like useLocation from React Router or Next.js’s built-in methods.

Checklist before using useState:

• Is this value simple and derivable during render?

• Does a library already manage this state?

• Does it need to trigger a re-render?

• If you answer “no” to all, you might not need useState at all.

Derive Values Without State

Here’s a little-known trick: Derived values don't need to live in state. 🚀 If your data can be computed from existing states or props, calculate it directly during render.

For example, formatting a date can be done on the fly without additional hooks:

const formattedDate = new Date(date).toLocaleDateString();

The code const formattedDate = new Date(date).toLocaleDateString(); derives a formatted date string from a given date input without storing it in the component's state. By creating formattedDate as a constant, it calculates the value on the fly each time it's called, reflecting the current state of date.

This approach avoids unnecessary state management, simplifies rendering logic, and keeps the component efficient, as derived values are recalculated only when the underlying data changes. Thus, it promotes a clean, functional style of programming in React

This keeps your components clean and avoids unnecessary state updates.

Compute Values Without Effects

Stop using useEffect for simple computations! 🛑 If your value can be calculated directly from state or props and doesn’t involve side effects, do it during render. For expensive computations, wrap them in useMemo to optimize performance:

const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]);This reduces the complexity of your code and keeps your components focused.

The code const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]); uses the useMemo hook to compute a value (expensiveValue) based on the data input without triggering side effects.

It memoizes the result of computeExpensiveValue(data), recalculating it only when data changes. This approach prevents unnecessary recalculations on every render, enhancing performance for expensive computations.

By relying on useMemo, the component efficiently derives the value based on its current props or state, keeping the rendering process efficient and focused on the latest data.

Keys Should Be Unique

Guilty as charged: I’ve used array indexes as keys in lists before. 😅 But did you know this can lead to bugs? React relies on unique keys to identify items, and using non-unique values can mess things up.

Generate unique IDs using crypto.randomUUID() but make sure to do it only when your state updates, not on every render. For objects, consider adding an id property:

const itemWithId = items.map(item => ({ ...item, id: generateUniqueId() }));

The code const itemWithId = items.map(item => ({ ...item, id: generateUniqueId() })); creates a new array, itemWithId, where each item in the items array is augmented with a unique id.

The spread operator (...item) copies the properties of each item, while generateUniqueId() generates a new, unique identifier. This ensures that each item has a distinct key, which is crucial for React components when rendering lists.

Unique keys help React efficiently manage updates, identify changes, and optimize rendering performance by distinguishing between different list items.

Don't Leave Out Dependencies

One of React’s cruel quirks: Forgetting dependencies in useEffect can lead to stale closures. 😱 For example, if you useEffect doesn’t include the dependencies it needs, it might not update as expected.

Always double-check your dependency arrays:

useEffect(() => {// Effect logic}, [dependency]);

The code useEffect(() => { /* Effect logic */ }, [dependency]); defines a side effect in a React component that runs when the specified dependency changes. It's essential to include all relevant dependencies in the dependency array to ensure that the effect behaves correctly.

Omitting dependencies can lead to stale or incorrect values being used in the effect, as React may not re-run it when needed. Including all dependencies helps maintain synchronization between the component's state and the effect, ensuring predictable behaviour and preventing potential bugs related to missed updates.

If your UI isn’t updating correctly, this is often the culprit.

Use useEffect Last

Here’s a pro tip: Don’t rush to use useEffect. 🙅‍♂️ It’s powerful but can lead to messy code if overused. React frameworks provide solutions to manage side effects more elegantly. For data fetching, consider libraries like TanStack Query or SWR that handle requests and caching efficiently, leading to a better user experience.

Alternative strategies:

• Derive values directly.

• Respond to events with handlers.

Fetch data on the server or with dedicated libraries.

Conclusion

React is a robust library, but knowing how to use it effectively can make all the difference. These lessons are just the beginning.

Having an in-depth idea about in and outs of any technology helps you during development and optimization.

React Js is the perfect library for modern development it has everything to offer for development and optimization

Thanks for reading, and happy coding! 🎉

• Follow Me on X: Prankur's Twitter

• Follow me on LinkedIn: Prankur's Linkedin

• Look at my Portfolio here: Prankur's Portfolio

And now, React is transitioning from version 18 to version 19. So hold onto your hats, React enthusiasts 🎩. React 19 has recently landed, and it’s a game-changer.

But before you start worrying about a steep learning curve, here’s some great news: React 19 isn’t about adding complexity – it’s about removing it.

In this guide, you’ll learn how this new version will simplify your coding life and turbocharge your React projects.

What We’ll Cover:

• Introduction to React 19

• What We’ll Cover:

• React 19 Features

• React Compiler: The Magic Behind the Scenes

• No More Memoization Hooks

• No forwardRef: Simplified Ref Handling

• The New use() Hook: A Game Changer

• Fetch Data with use() vs. useEffect

• Use Context with use()

• Directives: A Fresh Approach

• Actions: Streamlined Form Handling

• useFormStatus(): Managing Form State

• useFormState(): Stateful Form Actions

• useOptimistic(): Enhancing User Experience

• Conclusion

Excited to try out React 19? 🤩 While it's still in the canary stage, you can start experimenting with it by installing the canary version today. This update promises a smoother experience by automating what used to be manual optimizations.

React Compiler: The Magic Behind the Scenes

The star of React 19 is its new compiler. 🎉 This compiler transforms your React code into plain JavaScript, which boosts performance and, even better, frees you from constantly tweaking performance manually.

To optimize our React applications, we use some inbuilt methods like useMemo or useCallback. This tells React not to compile the code again if the inputs don’t change.

But if you forget to apply memoization, it results in wasting React resources and computational power. To deal with this, React 19 introduced React Compiler.

Say goodbye to manual optimizations and hello to cleaner code:

// No need for useCallback/useMemo
function Component() {
  return <div>Optimized!</div>;
}

Code explanation: The new compiler turns React code into optimized JavaScript, removing the need for manual optimizations like memoization.

No More Memoization Hooks

Remember the days of juggling between useCallback, useMemo, and memo to optimize performance? 😅 With React 19, those days are over. The new compiler optimizes your code behind the scenes, so you can drop these hooks and focus on writing beautiful, clean React components.

Memoization solves the complex calculation problems inside React, resulting in application optimization and performance improvements.

Previously, to apply Memoziation you had to use the useMemo hook. Here’s what that looked like in code:

//React 18 
import React, { useState, useMemo } from 'react';

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  // Memoize expensive calculation
  const expensiveCalculation = useMemo(() => {
    console.log("Calculating...");
    let sum = 0;
    for (let i = 0; i < 1000000000; i++) {
      sum += i;
    }
    return sum;
  }, [count]); // Recalculate only when `count` changes

  return (
    <div>
      <h1>Expensive Calculation: {expensiveCalculation}</h1>
      <button onClick={() => setCount(count + 1)}>Increment Count ({count})</button>
      <input 
        type="text" 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
        placeholder="Type something"
      />
    </div>
  );
};

export default ExpensiveComponent;

Code Explanation:

• The expensiveCalculation the function is computationally heavy, but using useMemo, it's only recalculated when count changes.

• The input field can be updated without triggering a recalculation of expensiveCalculation, which optimizes performance.

Now with the compiler in React 19, this is no longer required. You can just write your code and React will apply the memoziation.

Look at this code example:

// No need for manual memoization React 19
function Component({ children }) {
  return <div>{children}</div>;
}

Code explanation: you no longer need to use useCallback or useMemo – React 19 automatically handles optimizations.

No forwardRef: Simplified Ref Handling

Using forwardRef to pass refs around used to be a bit of a chore. 😓 But in React 19, you can pass refs just like any other prop. This streamlines your component code and makes ref handling a breeze. 🧹

function Child({ innerRef }) {
  return <input ref={innerRef} />;
}

Code explanation :forwardRef is no longer required – instead, refs are passed like regular props.

The New use() Hook: A Game Changer

The versatile new use() hook replaces multiple hooks, such as useEffect for data fetching as well as useContext and useState for consuming context data. It simplifies your code by handling promises and context with a single, elegant solution.

Look at this code example:

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default DataFetchingComponent;

Code Explanation:

• useEffect is triggered after the component mounts to initiate data fetching.

• We maintain loading, data, and error states to manage and display the appropriate UI.

• Once the data is fetched, the state updates, triggering a re-render to display the data.

Now with the help of the new use() hook in React 19, data fetching becomes easier and you don’t need to depend on state management hooks like useState() anymore.

Here is an example:

import React, { use } from 'react';

// Function to fetch data
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }
  return response.json();
}

const DataFetchingComponent = () => {
  // `use()` suspends the component until the promise resolves
  const data = use(fetchData());

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default DataFetchingComponent;

Code explanation:

• Suspense and use(): When you use use(), it suspends the component rendering until the promise resolves. If an error occurs, it can also trigger a Suspense error boundary.

• No need for useEffect: There's no need to manually manage data fetching with side effects, as React handles it under the hood.

• Error and loading states: These can now be managed globally using Suspense error boundaries without manually tracking states like loading or error.

Fetch Data with use() vs. useEffect

Fetching data used to require a bit of boilerplate with useEffect. With use(), you just resolve the promise and use React Suspense for a clean, easy data-fetching experience. 🧼 This means less code and more focus on what matters.

Use Context with use()

Handling context data has also become more straightforward. The new use() hook can now consume context directly, eliminating the need for useContext and making context management more intuitive. 🎯

Directives: A Fresh Approach

If you’ve been using Next.js, you might have seen directives already. 🌐 React 19 introduces directives to simplify component configuration. Use use client for client-side components and use server for server-side ones. It’s as easy as adding a string at the top of your file:

"use client";
function ClientComponent() {
  return <div>Client Side</div>;
}

Code explanation: Use use client and use server to declare client-side or server-side components.

Actions: Streamlined Form Handling

Forms just got a major upgrade with actions. 💥 Actions are functions connected to form submissions that can run on either the server or client side. This means cleaner code and a smoother form-handling process.

async function action(formData) {
  return await handleSubmit(formData);
}

Code explanation: Actions handle form submissions, running on the client or server.

Client Actions: A Practical Example

Client actions are great for immediate feedback. For example, alerting users with their input values has never been simpler. Just use use client and connect the form action to the form’s action prop. Easy peasy! 🥳

useFormStatus(): Managing Form State

Keep track of your form submissions with the useFormStatus() hook. 🕒 It helps manage form states like disabling the submit button while the form is pending. This is a must-have for smooth user experiences.

const { pending } = useFormStatus();
return <button disabled={pending}>Submit</button>;

Code explanation: useFormStatus() tracks form submission states, like disabling a button during submission.

useFormState(): Stateful Form Actions

We now have useFormState(), which is a new hook for managing form state. 🎛️ It’s similar to useState but works with form actions, allowing you to access both previous state and submitted data. It’s perfect for scenarios like adding items to a cart.

I feel useFormState() is closely associated with the features in the React Hook Form library, as its working features are mostly similar.

Here is a code example to help you understand it better:

import React from 'react';
import { useForm, useFormState } from 'react-hook-form';

const MyForm = () => {
  const { register, handleSubmit, control } = useForm();
  const { isSubmitting, isDirty, isValid } = useFormState({ control });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name:</label>
        <input {...register('firstName', { required: true })} />
      </div>
      <div>
        <label htmlFor="lastName">Last Name:</label>
        <input {...register('lastName', { required: true })} />
      </div>
      <button type="submit" disabled={isSubmitting || !isValid}>
        Submit
      </button>
      <div>
        <p>Form is {isDirty ? 'dirty' : 'pristine'}</p>
        <p>Submitting: {isSubmitting ? 'Yes' : 'No'}</p>
      </div>
    </form>
  );
};

export default MyForm;

Code explanation:

1. Import Hooks: We import useForm and useFormState from react-hook-form.

2. Setup Form:

   • useForm: This hook initializes the form methods, including register, handleSubmit, and control.

   • useFormState: We use this hook to extract form-state properties like isSubmitting, isDirty, and isValid.

3. Register Inputs: We register each input field using the register function, specifying any validation rules (for example required).

4. Handle Submission: The onSubmit function handles the form submission, where you can perform your desired actions with the form data.

5. Form State Info: We display the form's current state (whether it's dirty or submitted) below the form.

Key Features of useFormState:

• Performance: useFormState only re-renders when the specific fields it's monitoring change, making it efficient.

• Controlled State: You can easily manage and observe the form's state without writing boilerplate code for handling changes and validations.

useOptimistic(): Enhancing User Experience

For real-time applications, the useOptimistic() hook is helpful. 💬 It allows for optimistic updates, making your app feel snappy by updating the UI instantly and syncing with the server in the background.

const [optimisticState, setOptimistic] = useOptimistic(initialState);

Code explanation: Enables optimistic UI updates before syncing with the server.

Conclusion

React 19 is here to simplify your coding experience and enhance performance. 🎉 To dive deep into all these features and more, check out my recent article about React Hooks.

If you’re ready to streamline your React projects, embrace the future with React 19 and make your development experience smoother and more enjoyable. 🌟

• Follow Me on X: Prankur's Twitter

• Follow me on Linkedin: Prankur's Linkedin

• Look at my Portfolio here: Prankur's Portfolio

Using libraries and frameworks allows developers to focus more on the development while the tools take care of certain functionality in the background. And React.js is a popular JavaScript library for building front-end applications.

In this article, you’ll learn about the backbone of React which is Hooks, and how they can make your life easier as a developer.

What We’ll Cover:

• Prerequisites:

• Getting Started

• What are Hooks?

• Types of React Hooks

  • State Management Hooks

  • Effect Hooks

  • Ref Hook

  • Performance Hooks

  • Context Hook

  • Transition Hook

  • Some Random Hooks

• Conclusion

Prerequisites:

• You should know the basics of JavaScript.

• You should also know the basics of React, like setting up an app, updating it, and using state.

Getting Started

So you've decided to build a React app—congratulations! 🎉 But as you dive into the world of React hooks, you might find yourself feeling overwhelmed. With a plethora of hooks available, figuring out which ones to use and when can be a bit daunting.

Well, don’t worry – in this guide, I’ll break down every major hook so you can see how they fit together. We’ll also discuss which ones you'll use more frequently versus more rarely.

By the end of this article, you'll have a comprehensive map of React hooks and their practical applications.

What are Hooks?

In JavaScript, we use variables to store data and later perform operations on that data.

Hooks in React work similarly, but they are designed to manage state in functional components. Instead of manually declaring a single variable, hooks like useState give us a way to declare stateful values along with a setter function to update that state.

Here’s a simple example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);  // Initialize state and state updater

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

In this code, I use the useState hook to declare a piece of state called count and set its initial value to 0. The setCount function allows us to update this state. Every time the button is clicked, we use setCount to increase count by 1. When the state updates, React re-renders the component to reflect the change.

Unlike declaring let count = 0, using useState lets React remember the state across renders and ensures that the UI updates correctly.

Types of React Hooks

To make things easier, you can think of React hooks as falling into eight major categories:

• State Management Hooks – For handling state.

• Effect Hooks – For side effects.

• Ref Hooks – For referencing JavaScript values or DOM elements.

• Performance Hooks – For optimizing performance.

• Context Hooks – For accessing React context.

• Transition Hooks – For smoother user experiences.

• Some Random Hooks – Special-purpose hooks.

• New Hooks (React 19) – Cutting-edge tools introduced in the latest React version.

In React, you can also build custom hooks for different use cases. Every hook starts with the use keyword – even custom hooks start with this structure. This keyword is reserved for Hooks in React.

Let’s explore these hooks in detail.

State Management Hooks

1. useState

The useState hook is the bread and butter of React. It’s the most commonly used hook, and it’s key for managing state in functional components. With useState, you can capture user inputs, show or hide components, and manage numbers, like in an ecommerce app with a shopping cart.

useState is versatile and straightforward: you initialize it with a value, and it returns a state variable and an updater function.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);  // Initialize state and state updater

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

Code explanation: useState initializes the state (count) and provides a function (setCount) to update that state.

2. useReducer

When useState isn’t enough, useReducer comes into play. This hook is perfect for managing complex state logic.

It uses a reducer function to simplify state updates and is especially useful when multiple state variables are interdependent or when actions need to be dispatched.

Think of it as an upgrade for managing more complicated state scenarios. Here’s an example:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

Code explanation: useReducer is useful for managing complex state updates, like handling multiple related actions.

3. useSyncExternalStore
useSyncExternalStore is a hook for integrating non-React state stores into your React components.

While not commonly used, it’s crucial if you’re building your own state management library from scratch.

import React, { useSyncExternalStore } from 'react';

const externalStore = {
  subscribe: (callback) => {
    const interval = setInterval(callback, 1000);
    return () => clearInterval(interval);
  },
  getSnapshot: () => new Date().toLocaleTimeString(),
};

function Clock() {
  const time = useSyncExternalStore(externalStore.subscribe, externalStore.getSnapshot);
  return <div>{time}</div>;
}

Code explanation: useSyncExternalStore lets you connect your React component to non-React data sources, like global stores.

Effect Hooks

1. useEffect
The useEffect hook performs side effects on your components. Whether you’re interacting with the DOM or fetching data, useEffect is your go-to. It runs after each render by default, but you can customize its behavior using a dependency array.

But you should consider using more specialized tools or libraries like React Query for event-based or render-based side effects.

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);  // Empty dependency array means it runs once on mount

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

Code explanation: The useEffect hook fetches data when the component mounts. The effect will only run one time when the array is empty.

2. useLayoutEffect
useLayoutEffect works similarly to useEffect but runs synchronously right after the DOM has been updated. It’s used for operations that need to happen before the browser paints the UI, like measuring elements.

Use it sparingly, as it runs less frequently than useEffect. Here’s an example:

import React, { useLayoutEffect, useRef } from 'react';

function Measure() {
  const divRef = useRef();

  useLayoutEffect(() => {
    console.log(divRef.current.getBoundingClientRect());
  }, []);

  return <div ref={divRef}>Measure me!</div>;
}

Code explanation: useLayoutEffect measures DOM elements before the browser repaints.

3. useInsertionEffect
Exclusively for CSS-in-JS library developers, useInsertionEffect runs before useEffect and useLayoutEffect to ensure that CSS styles are inserted properly. It’s niche, but crucial for maintaining style integrity in complex applications.

import React, { useInsertionEffect, useState } from 'react';

function StyledComponent() {
  const [text, setText] = useState('Hover over me!');

  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      .hovered {
        color: red;
        font-size: 24px;
        transition: color 0.3s ease;
      }
    `;
    document.head.appendChild(style);

    return () => {
      document.head.removeChild(style);
    };
  }, []);

  return (
    <div
      className="hovered"
      onMouseEnter={() => setText('You hovered over me!')}
      onMouseLeave={() => setText('Hover over me!')}
    >
      {text}
    </div>
  );
}

Code explanation: The useInsertionEffect hook is used to inject styles into the DOM at runtime, making the component’s styling dynamic and scoped only to that component.

Ref Hook

1. useRef
useRef allows you to persist values across renders without causing re-renders. It's perfect for storing mutable values or referencing DOM elements. Whether you’re handling intervals, storing a DOM node, or keeping track of the previous state, useRef has you covered.

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

Code explanation: This React code uses useRef to create a reference to an input element. When the button is clicked, the handleFocus function triggers the input field to gain focus using inputRef.current.focus().

Performance Hooks

1. useMemo
For optimizing performance, useMemo is your friend. It caches the results of expensive computations and only recalculates when dependencies change. This can significantly improve performance, especially in scenarios involving heavy calculations.

import React, { useState, useMemo } from 'react';

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

  const expensiveComputation = useMemo(() => {
    return count * 100;
  }, [count]);

  return (
    <div>
      <p>Expensive Computation: {expensiveComputation}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

Code explanation:This React code uses useMemo to optimize an expensive calculation (count * 100). The calculation only re-runs when count changes. The button increments count, triggering a UI update with the new result.

2. useCallback
useCallback is similar to useMemo, but it focuses on memoizing callback functions. This is useful for preventing unnecessary re-renders of child components by keeping functions stable across renders.

import React, { useState, useCallback } from 'react';

function Child({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

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

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return (
    <div>
      <Child onClick={handleClick} />
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

Code explanation: This React code uses useCallback to memoize the handleClick function, preventing re-creation on every render. The Child component uses this function for its button. The parent updates count independently.

Context Hook

1. useContext
The useContext hook simplifies accessing context values. It reads the value from the nearest context provider and works seamlessly across nested components. This makes it easier to manage global states or themes.

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button>{theme}</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

Code explanation: This React code uses createContext to create a ThemeContext. useContext accesses the context value, displaying it in the button. The App component provides "dark" as the theme to ThemedButton.

Transition Hook

1. useTransition
useTransition lets you mark specific state updates as low-priority, enhancing the user experience by keeping the app more responsive during intensive computations or transitions. This improves the user experience by making the app more responsive.

import React, { useState, useTransition } from 'react';

function TransitionComponent() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      setCount((prevCount) => prevCount + 1);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Increase Count</button>
      {isPending ? <p>Loading...</p> : <p>Count: {count}</p>}
    </div>
  );
}

Code explanation: This code uses useTransition to increment count without blocking the UI. While the state updates, isPending shows "Loading...". Clicking the button triggers a smooth, non-blocking state transition.

Some Random Hooks

1. useDeferredValue
Similar to useTransition, useDeferredValue helps in deferring state updates to keep the app responsive. It schedules updates to happen at an optimal time, enhancing the user experience without manual intervention.

import React, { useState, useDeferredValue } from 'react';

function DeferredComponent() {
  const [value, setValue] = useState('');
  const deferredValue = useDeferredValue(value);

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>Deferred Value: {deferredValue}</p>
    </div>
  );
}