AI Coding Projects| Build NextJS and React Projects using AI

Explore building a real estate app with Node.js, MongoDB, and JSON Web Token authentication, demonstrated live with public and private navbars, property listings, inquiries, and a property owner dashboard.

Build a real estate application with Node.js and MongoDB using an AI-driven workflow, featuring a minimal setup with windsurf editor and JWT authentication.

Implement authentication end-to-end by building backend auth middleware, login, registration, and profile routes, then secure the front end with an auth context and a navbar. Extend to add and list properties with token handling, API integration, and cloudinary image uploads.

Learn to authenticate users, add and list property listings, contact agents, and display agent information on the details page with a professional layout.

Build and navigate a user dashboard to manage properties and inquiries, populate listings owned by the logged-in user, and view all inquiries under those listings.

Manage inquiries by property or login user, fetch received and sent inquiries, and update statuses—pending, approved, rejected, or resolved, contacted, archive—while enabling email replies and login-protected inquiry submission.

Make property listings and details public while requiring users to log in before sending inquiries, and demonstrate how access changes when logged out.

Update a property owned by the logged-in user by editing a pre-filled form, uploading images, and saving changes after re-authenticating to verify the update.

Delete a property owned by the logged-in user within the editor and confirm the deletion, showing that the item has been deleted.

Learn to implement filtering, searching, and pagination on both the client and the server, including filters by property, location, and date added, with descending order.

Design the homepage by adding a header with a search bar for a railroad estate project and listing six properties, then reload and filter results by name equal to prime.

Style the home page using AI styling and brand colors, focusing on a vibrant, responsive layout with icons and call-to-actions.

Implement a responsive navigation bar using brown colors from the home page, include a logo icon linked to the home page, and ensure it adapts as the browser window narrows.

Redesign property listings by adding image thumbnails with a react sleek carousel, enabling click-to-open carousels in brand colors, and ensuring responsive layouts with colorful icons.

Redesign the property details page using brand colors, responsive images, and a sleek, colorful carousel implemented in React. Preview the updated layout and enforce sign-in before users can send inquiries.

Redesign the login form with a catchy, colorful, modern design that includes icons and responsive behavior; implement a similar design to the registration form and verify the login works.

Redesign the dashboard layout and prompt, align paths to the dashboard, and include properties and inquiries count using the brand colors; preview shows listings and new messages.

Redesign the inquiries management interface using brand colors and icons, implement status updates (received, pending, resolved, archived), and design the accompanying form with a preview.

Apply prompts to redesign property forms in a Next.js and React project, using URL-based page type detection, brand colors, and icons, while preserving core logic and enhancing the user interface.

Enhance the app by making the header responsive, applying brand-colored footers with icons, and redesigning pages to be vibrant and login gated for property actions.

Watch a demo of building a resume and cover letter builder with react, firebase authentication, and gemini ai, featuring two styles (modern and minimal) and ai-generated descriptions with pdf export.

Plan and build a resume and cover letter builder with Windsurf editor, using React and Firebase, featuring authentication, export, and data storage powered by Gemini AI.

Discover the refined method for scope driven incremental ai project development, from defining scope and prd to building features like authentication and resume builder, with continuous feedback and deployment.

Implement authentication in a React project using Firebase, styled with Tailwind, including login and signup flows, Firebase configuration, and protected routes via React Router Dom.

Build a resume builder and cover letter in a Next.js React project, using Gemini AI and Google generative AI integration to generate resumes from personal info, experience, and education.

Implement a cover letter generation feature in the resume builder, generating and exporting a formatted letter using name, email, recipient, and industry. Refine the user interface and home page.

Focuses on improving UI by designing a landing page and cohesive dashboard, login, and sign-up flows for a resume and cover letter builder using a design system and React icons.

Demonstrates building a job finder app with React, Firebase and Adzuna API, featuring public/private nav, live search, filters by location and salary, save and apply flows, and AI-driven UI.

Create a product requirements document (PRD) to guide building a job finder app with React and AI, outlining features, brand colors, structure, and integrations with Adzuna, Firebase, and Tailwind.

Build a React app using Cursor Eye and Veed, set up Tailwind CSS, configure Firebase authentication, integrate Adzuna API, enable saving jobs, and redesign the user interface with brand colors.

Develop an ai-powered developer assistant in a React and Next.js project, using Firebase authentication and Gemini AI API to provide private, code-aware problem solving and smart coding help.

Clone the AI powered developer assistant starter with GitHub Desktop, install dependencies with npm i, and run npm run dev to explore the home page and login flow.

Learn how to integrate Firebase into a React web app by configuring authentication with browser local persistence, initializing the app, and using Firestore to persist chat history.

Implement authentication logic in your Next.js and React AI coding projects using Firebase authentication, including email/password login and registration, sign out, real-time auth state observer, and Google sign-in with popup.

Learn to implement a login form in a React app with email/password and Google sign-in using Firebase authentication, private routes, and navigation to a chat page after login.

Learn to implement Google sign-in with Firebase, display user info in a responsive navbar, and protect routes with a private root that redirects unauthenticated users to the login page.

Initialize a chat feature with the Gemini AI API or OpenAI, configure Firebase, and load user messages on page load via a Firestore listener, including a welcome message.

Implement a handleSubmit workflow that prevents default, validates input, saves messages to Firestore, uses Gemini AI to generate a reply, and manages loading and errors.

Learn to format AI chat responses in a Next.js and React project using a React syntax highlighter, a message content component, and React Markdown, with Gemini API key support.

Enter and save the API key using the API key prompt component, store it in local storage, gate access until the key is saved, then navigate to the chart component.

Render the API key prompt component, check local storage for Gemini API key, and navigate to the API key page or chart based on login and key availability.

Deploy your AI powered developer assistant to the internet using Netlify, configuring GitHub repository, creating and pushing code, handling redirects, and resolving Firebase unauthorized domain by adding authorized domains.

Build a generative AI SEO keyword generator with React and Firebase, preview a live demo, and learn to deploy it as a SaaS product with authentication and keyword history.

Create your first React application using Vite, install dependencies with npm i, and set up Tailwind CSS, Firebase, and essential packages for a functional UI and HTTP requests.

Configure Firebase for a web app by creating a project, adding firebase.js, and initializing the app to enable authentication and Firestore.

Implement a login component using Google sign-in with Firebase authentication, wiring React Router navigation to a dashboard and enabling Google auth in Firebase console.

Build a dashboard that uses the Cohere API to fetch and display user-specific keywords from Firestore, with Firebase authentication and real-time updates via onSnapshot.

Design an API key modal in a React dashboard, store and reveal the key in local storage, and generate keywords via the Cohere API using Axios post.

Display generated keywords by parsing the response data text into an array, trimming and filtering items, and rendering them with a copy-to-clipboard feature and success messaging.

Generate keywords and save them to Firestore under keywords with topic, keywords list, user id, user name, and timestamp; fetch and display the saved keywords history with copy-to-clipboard support.

Master clear history with batch deleting in Firestore, safeguard by matching user IDs, and implement copy to clipboard along with a navbar showing login user details and sign out.