This is the official README file for the AI Ads Gen Project using Next.js bootstrapped with create-next-app.
We are making use of pnpm so if you are not familiar with it or haven't heard it before, chances are you don't have it installed
Install using:
npm i -g pnpmRun the development server:
pnpm devOpen http://localhost:3000 with your browser to see the result.
For the Newsletter section, a simple form validation should be implemented using react form hooks or zod
Create PIXEL PERFECT DESIGNS, it can not be iterated enough!!
As a team lead, I want to ensure our code meets high standards before merging to the main branch of the adgen-ai-frontend repository. Use forks and follow these steps to work on your issues, show your progress, and get my approval:
Go to the adgen-ai-frontend repository on GitHub (e.g., https://github.com/yourusername/adgen-ai-frontend).
Click the Fork button in the top-right corner.
Choose your personal GitHub account to create a fork (e.g., https://github.com/yourusername/adgen-ai-frontend).
Open a terminal and clone your fork:
git clone https://github.com/[your-username]/adgen-ai-frontend.git
cd adgen-ai-frontendAdd the upstream (main) repository as a remote to sync later:
git remote add upstream https://github.com/[your-username]/adgen-ai-frontend.git
git fetch upstreamFor your assigned issue (e.g., "Implement Header with Navigation"), create a branch from main:
git checkout main
git pull upstream main
git checkout -b feature/header-navigationName your branch descriptively (e.g., feature/your-issue-title).
Work on your component or section in this branch.
Use Next.js, TypeScript, Shadcn UI, and Tailwind CSS as outlined in the issue.
Ensure your code: Matches the Adgen-ai Figma design, make pixel perfect design
Uses TypeScript for type safety.
Leverages Shadcn UI components (e.g., Button, Card) with Tailwind styling.
Is responsive (works on mobile, tablet, desktop).
Follows Next.js conventions (e.g., src/components/, src/pages/).
Test locally with npm run dev and check for console errors.
Commit frequently with clear messages:
git add .
git commit -m "feat(header): Implement navigation with logo and links"Push to your fork (not the main repo):
git push origin feature/header-navigationGo to your fork on GitHub, click Pull requests → New pull request.
Select your branch (e.g., feature/header-navigation) and compare it with the main repo’s main branch (e.g., yourusername/adgen-ai-frontend:main).
Title the PR: "feat: Implement Header with Navigation" (match the issue title).
In the description, include: A link to the issue (e.g., #1 for Issue 1).
A summary of changes (e.g., "Added Header component with sticky navigation, responsive design, and Tailwind styling").
Screenshots or a Loom video showing the component in action (optional but helpful).
Set the base repository to yourusername/adgen-ai-frontend and base branch to main.
Click Create pull request.
I’ll review the code, check the design match, and ensure it is good to go.
I’ll review the PR, focusing on: Code quality (TypeScript, linting, formatting).
Good commit messages Check here to learn about writing good commit messages
Design accuracy (Figma match, responsiveness).
Functionality (no errors, interactive states work).
Once approved, I’ll merge the PR into main.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Tailwind Documentation
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!