مبرمج NextJs Frontend

Goal: Create a modern, professional, and user-friendly website to showcase Idealistic Solutions' offerings.

Backend: Existing API (92% complete). The freelancer will not develop any backend logic.

Frontend Technologies:

React: JavaScript library for building the user interface.

Next.js: React framework for server-side rendering, routing, and performance optimization.

GitHub: For version control, collaboration, and deployment.

CSS Framework/Library: (Suggest: Tailwind CSS or Material UI) - To be discussed with the freelancer for consistency and speed.

API Interaction: The freelancer will be responsible for integrating with the provided API to fetch and display data.

Testing: The freelancer will implement unit and integration tests to ensure code quality and functionality.

Pages and Components (Detailed)

Here's a breakdown of the pages and the functionality/components they will need, you can use this list when talking with the freelancer:

Homepage (/)

Purpose: The main entry point of the website, introducing Idealistic Solutions.

Components:

Hero Section:

Headline (Compelling and clear value proposition)

Subheadline (Brief explanation of what Idealistic Solutions does)

Call-to-Action Button (e.g., "Explore Our Services," "Get a Demo," "Contact Us")

Potentially an Image/Video/Animation related to the SAS industry

About Us Teaser Section:

Brief Company Introduction

Key values or mission.

Link to the About Us page.

Services Highlight Section:

Grid/Cards showcasing key services offered.

Each service item should have:

Icon/Image

Service Name

Brief Description

Link to a detailed service page

Client Testimonial Section (Optional):

Quotes from satisfied clients

Client names/logos

Call to Action Section:

Another prominent button to encourage leads.

e.g., "Request a Quote," "Schedule a Consultation."

Footer:

Company information, copyrights, navigation links, contact information, social media links.

About Us (/about)

Purpose: Detailed information about Idealistic Solutions.

Components:

Hero Section:

Headline (e.g., "About Idealistic Solutions")

Background image/video related to the company

Company History/Story:

Narrative of how the company started and its evolution.

Mission & Vision:

Clear explanation of the company's mission and vision statements.

Values:

List of core values that guide the company.

Team Section (Optional):

Profiles of key team members with names, titles, and brief bios.

Services (/services)

Purpose: Overview of all services offered.

Components:

Hero Section:

Headline (e.g., "Our Services")

Brief overview of the range of services offered

Services Grid/List:

Display all available services with:

Service Name

Icon/Image

Brief Description

Link to the detailed service page

Single Service Pages (/services/[service-slug])

Purpose: Dedicated page for each service, providing in-depth information.

Components:

Hero Section:

Service Name

Image/Video specific to the service

Service Description:

Detailed description of the service and its benefits.

Features:

List of key features, potentially using icons.

Who is it for:

Target market or specific user cases.

Benefits Section:

Clear explanation of benefits.

Call-to-Action Section:

e.g., "Request a Demo," "Get Started."

Contact Us (/contact)

Purpose: Allows users to get in touch with Idealistic Solutions.

Components:

Hero Section:

Headline (e.g., "Contact Us")

Contact Form:

Name, Email, Phone (Optional), Message.

Form validation

Submit button

Handle API calls to send the message

Contact Information:

Company address, Phone number, Email, etc.

Map integration (Optional)

Blog (/blog) - Optional

Purpose: Share industry insights, company news, and other content

Components:

Blog Post List:

Display blog post titles, excerpts, author, date, and a link to each post.

Pagination

Single Blog Post Page (/blog/[post-slug])

Purpose: Dedicated page for blog posts

Components:

Blog Post Content:

Full blog post content with the formatted text, images, and other media.

Author, date

Technical Details for the Freelancer:

Setup:

Project initialization using create-next-app.

Configuration of ESLint, Prettier, and stylelint (Optional).

Initial Git repository and setup.

Routing:

Next.js built-in file-system routing.

Implement dynamic routes for services and blog pages.

API Integration:

Use fetch or a library like axios to interact with the provided API endpoints.

Handle different HTTP methods (GET, POST).

Implement error handling and display appropriate messages to the user.

Managing API Keys and variables securely (ideally using .env file).

State Management:

Use React Context or a library like Recoil (if necessary for complex state). For simpler projects, prop drilling might suffice.

Styling:

Choose a CSS framework or library (Tailwind CSS or Material UI) to establish consistent design.

Ensure responsive design for various screen sizes.

Image Optimization:

Use Next.js built-in Image component for optimized image delivery.

SEO:

Implement proper page meta tags and structured data.

Optimize content for search engines.

Testing:

Unit Tests: Using Jest and React Testing Library for component testing.

Integration Tests: Using Playwright or Cypress for E2E testing to check data flow between frontend and API.

Deployment:

Deploy the website using a platform like Vercel or Netlify.

Accessibility:

Ensure that the website is accessible by following accessibility guidelines (WCAG).

Code Quality:

Write clean, well-documented, and maintainable code.

Follow coding conventions.

Deliverables:

Fully functional website based on the provided designs.

Well-structured, tested code hosted on GitHub.

Documentation on how to update the content if needed.

A detailed list of API integration logic.

Communication & Collaboration:

Regular communication through the preferred channel (e.g., Whatsapp, email, etc.).

Regular code commits to GitHub.

Provide the freelancer with the API documentation and necessary endpoints.

Important Considerations:

Content: Content for each page must be provided (or in place) for the freelancer to use.

API %92 ready, still working on some endpoints and enhancements,no backend development is required.

The freelancer will need to connect to an existing API.

There is no figma.

We will use this template, “Able Pro Nextjs MUI React Admin Dashboard Template”.

Any public form should have Google Recaptcha V3.