TMP: GClient Learner Platform – Phase 1: Building a Learner Portal with Next.js, TypeScript, and Tailwind CSS (Update 2)

When I started this project, my initial plan was to use Next.js with JavaScript and CSS Modules for styling. But as I built out my components, I realized that TypeScript and Tailwind CSS would be a much better choice for scalability, maintainability, and styling efficiency. So, I scrapped my original approach and rebuilt everything using TypeScript and TailwindCSS.

This article is a breakdown of how I set up my Next.js project, organized my folders, installed dependencies, and built the three major UI sections:

• ✅ Learner App Page (Homepage & Application Page)
• ✅ Learner Reg Flow (Registration & Authentication)
• ✅ Learner Page (User Profile & Dashboard)

If you’re planning to build something similar, this will save you a lot of time! 🚀

📌 Setting Up the Project

1️⃣ Installing Next.js

I started by creating a Next.js 14 project with TypeScript support:

npx create-next-app@latest my-learner-app --typescript
cd my-learner-app

✅ Now, Tailwind CSS was fully integrated!

📂 Organizing the Folder Structure
As I built more features, I quickly realized that good folder structure is everything in a growing project.

Here’s how I structured my Next.js App:

📦 my-learner-app
 ┣ 📂 app
 ┃ ┣ 📂 components
 ┃ ┃ ┣ 📂 LearnerAppPage
 ┃ ┃ ┣ 📂 LearnerRegFlow
 ┃ ┃ ┣ 📂 LearnerPage
 ┃ ┃ ┗ 📂 Navbar
 ┃ ┣ 📂 api
 ┃ ┃ ┣ 📂 user
 ┃ ┃ ┃ ┣ 📂 auth
 ┃ ┃ ┃ ┃ ┣ signup.ts
 ┃ ┃ ┃ ┃ ┣ signin.ts
 ┃ ┃ ┃ ┃ ┣ verify-otp.ts
 ┃ ┃ ┃ ┃ ┗ profile.ts
 ┃ ┣ 📂 lib
 ┃ ┃ ┣ mongodb.ts
 ┃ ┃ ┣ sendEmail.ts
 ┃ ┣ 📂 models
 ┃ ┃ ┗ User.ts
 ┃ ┣ 📂 styles
 ┃ ┃ ┗ globals.css
 ┃ ┣ 📄 tailwind.config.js
 ┃ ┣ 📄 .env
 ┃ ┗ 📄 next.config.js

✅ components/LearnerAppPage/ → User Profile & Dashboard
✅ components/LearnerRegFlow/ → Registration & Authentication
✅ components/LearnerPage/ → Homepage & Application Page
✅ api/user/auth/ → Backend routes for signup, login & OTP verification
✅ lib/ → MongoDB connection & email service
✅ models/User.ts → User schema for MongoDB

🎨 Building the UI Components

I grouped my UI components into three major sections:

1️⃣ LearnerPage (Homepage & Application Page)
This included:

✅ A beautiful homepage with course information
✅ An application page where users could register for a course

2️⃣ Learner Reg Flow (Signup & Login)
This handled:

✅ Signup with OTP verification
✅ Login with JWT authentication

3️⃣ Learner AppPage (Profile & Dashboard)
This allowed users to:

✅ View their profile
✅ See their registered courses

🎉 Wrapping Up
Starting this project, I thought JavaScript + CSS Modules would be sufficient. However, as I developed more features, I quickly realized the benefits of TypeScript and Tailwind CSS:

✅ TypeScript made everything safer and easier to debug.
✅ Tailwind CSS significantly sped up the styling process.
✅ A well-structured folder system proved essential for scalability.
This project was a valuable learning experience, and I'm very pleased with the final result! 🚀

💬 What are your thoughts? Would you consider using TypeScript and Tailwind CSS for your next project? Let's discuss in the comments! 😊🔥

In the next section, I'll delve into the details of how I implemented the authentication system.