Ensure Node.js is installed on your system. You can download it from the official Node.js website.
3.2 Create a New Next.js App
Run the following command to create a new Next.js app:
npx create-next-app@latest my-cv-builder
cd my-cv-builder
3.3 Install Dependencies
nstall the necessary dependencies for your project:
Tailwind CSS: For styling your application.
Framer Motion: For adding animations and transitions.
Formik + Yup: For managing form states and validating user input.
Axios: For making HTTP requests to your backend and the OpenAI API.
React Query: For handling data fetching, caching, and synchronization.
Run the command: npm install tailwindcss@latest framer-motion formik yup axios react-query
3.4 Set Up Tailwind CSS
Initialize Tailwind CSS by running the command: npx tailwindcss init -p. This will create a tailwind.config.js file and a postcss.config.js file in your project.
Configure tailwind.config.js by setting up your content paths to ensure Tailwind purges unused styles in production.
Add Tailwind directives to your CSS by opening styles/globals.css and including the Tailwind base, components, and utilities.
3.5 Test the Tailwind Setup
Run the development server using npm run dev.
Verify the setup by opening http://localhost:3000/ in your browser to see the default Next.js welcome page.
Test Tailwind by applying some basic styles to pages/index.js.
3. Set Up the Next.js Project Environment
3.1 Install Node.js
3.2 Create a New Next.js App
Run the following command to create a new Next.js app: npx create-next-app@latest my-cv-builder cd my-cv-builder
3.3 Install Dependencies
3.4 Set Up Tailwind CSS
3.5 Test the Tailwind Setup