FRONTEND: Setup Next.js 14 and Essential Frontend Dependencies

[yusuftomilola]

Description

We need to set up the frontend for the ManageHub project with Next.js 14 and essential dependencies. This will provide a solid foundation for building the hub management system.

Tasks

1. Initialize Next.js 14

   • Run the following command to create a Next.js project:

     npx create-next-app@latest managehub-frontend

   • Select TypeScript when prompted.

2. Install TailwindCSS

   • Install Tailwind and its dependencies:

     npm install tailwindcss postcss autoprefixer

   • Initialize Tailwind:

     npx tailwindcss init -p

   • Configure tailwind.config.js with the correct content paths.

3. Install Lucide Icons

   • Install Lucide React for icons:

     npm install lucide-react

4. Install Form Handling & Validation

   • Install formik and yup for form validation:

     npm install formik yup

5. Install API Handling & State Management

   • Install axios for making API requests:

     npm install axios

   • Install react-query (TanStack Query) for efficient API data fetching and caching:

     npm install @tanstack/react-query

   • Install zustand for state management:

     npm install zustand

6. Verify Installation

   • Run the development server:

     npm run dev

   • Ensure everything works correctly without errors.

Expected Outcome

A fully functional Next.js 14 setup with TailwindCSS, Lucide icons, Formik/Yup for validation, Axios for API requests, React Query for data fetching, and Zustand for state management.

Additional Notes

• Follow best practices when structuring the project.
• Ensure the dependencies are added to package.json.
• Provide a short setup guide in the README.

---

1. Include an ETA
2. Your TG handle
3. Join the telegram group: https://t.me/managehubOD

[hrushi5387]

Hi @yusuftomilola ,
Could you please assign this to me?

ETA: 1-2 Hrs
TG Handle: Hrushi

[sasasamaes]

Can I take this from here?
Full Stack developer with 5+ years of experience involved in the full software development lifecycle. My experience includes providing IT solutions for enterprises using JavaScript, React, TypeScript, Node.js, and MongoDB. Additionally, I am expanding my knowledge in Web3 technologies, particularly in Cairo and Solidity.

I am also a community leader and sensei at Dev.f, where I mentor and lead a vibrant community of developers and am a Dojo Coding Member.

My areas of interest include Web3, frontend, backend, and full-stack development.

[Emmzyemms]

Would love to tackle this! i have read through and i will love to work on this issue pls.

[Sundayabel222]

Can I attempt this issue?

[mimisavage]

Let me handle this issue!

[Agbeleshe]

Hello,
I’d love to take on this issue! With over three years of experience in React, Next.js, and TypeScript, I am confident in setting up a solid frontend foundation for the ManageHub project.

Approach:

• Initialize the Next.js 14 project and configure TypeScript.
• Set up TailwindCSS, ensuring proper content paths in'''.
• Install and integrate Lucide icons, Formik/Yup for form validation, Axios for API handling, React Query for efficient data fetching, and Zustand for state management.
• Follow best practices for project structure and include a concise setup guide in the README.
• Verify the installation and ensure everything runs without issues.

ETA: : 8HRS

TG Handle: @Bioba_dan

[Elite-tch]

Could I take a shot at this?
ETA 12hrs

[Verifieddanny]

May I handle this issue?
ETA: 1 hour
TG Handle: @DevDanny0

[Yunusabdul38]

Can I tackle this one?
i have 4 years of experience with typescripts and have contribute to frontend projects that end up being merge,
I will make sure to implement a pixel perfect UI base on the provided figma link above if am assign
Am confident I can handle this task

[melissacinta]

Hi @yusuftomilola ,

I’d love to set up the frontend for ManageHub. I have extensive experience setting up large-scale projects and monorepos, and I can efficiently configure Next.js 14 with the necessary dependencies while following best practices.

✅ Plan:

• Initialize Next.js 14 with TypeScript
• Configure TailwindCSS for styling
• Install and set up Lucide icons
• Implement Formik & Yup for form validation
• Set up Axios, React Query, and Zustand for API handling & state management
• Ensure a clean and scalable project structure
• Provide a short setup guide in the README

I can complete this setup within [ETA: 1 hour], ensuring a smooth development experience. Let me know if I should proceed!

TG Handle: TechieNg