SEO Website Dev: Figma to Next.js | TS | TailwindCSS

Project Overview

This is a website for a clinic that supports people with mental health challenges. The project was divided into two main parts: the public-facing website and a custom admin panel where the client can manage all site content.

Technologies

Website: Next.js, TypeScript, Material UI, REST API

Admin Panel: React, TypeScript, Firebase (for authentication), Material UI, REST API

Development Stages

1. Landing Page Development (3+ weeks):

Built the landing page based on the design mockups using Next.js and Material UI for consistent styling.

Implemented multilingual support that can be toggled on or off directly from the admin panel.

Integrated Google Analytics 4 for tracking user behavior and gathering insights.

Connected a contact form via FormSpree to ensure reliable form submissions to the client.

Optimized site performance for fast loading and cross-browser compatibility.

2. Custom Admin Panel Development (3+ weeks):

Developed secure authentication using Firebase to control admin access.

Created comprehensive content management functionality, including:

Adding, editing, and deleting blogs, doctors, images, and text content.

Managing multilingual content with easy language toggling.

Integrated REST API to enable real-time communication between the admin panel and the website.

Designed a user-friendly interface with Material UI to streamline content management tasks.

3. Testing & Support:

Conducted thorough testing of all features to ensure a bug-free and smooth user experience.

Provided ongoing support and maintenance post-launch, promptly addressing client requests and updates.

Outcome

Delivered a modern, multilingual, and fully manageable clinic website paired with a powerful custom admin panel. The client can easily update content, add news, manage languages, and monitor user engagement through analytics, all without developer assistance.