Building a Education App with Next.js Storybook Node.js UI module component and TypeScript

This Next.js project encompasses a detailed exploration of environment setup, Server-Side Rendering (SSR), Static Page Generation, embedded components, react-hook-form for form handling, Framer Motion for animations, storybook components, SEO optimization, and production preparation.

Styling is streamlined with CSS Modules, and code quality is assured through ESLint and Stylelint. Debugging practices were integrated, concluding with the construction of a production-ready project.

🚀 Demo

https://muhs-education-app.vercel.app

🧐 Features

Here're some of the project's best features:

• Grid Layout ➡️🔀⬅️
• Storybook components 🔄📄
• Review Forms🔗
• Validations
• Ratings with ⭐
• Expandable card

🛠️ Installation Steps:

1. Install packages

npm i & yarn install

2. Setup .env file

NEXT_PUBLIC_DOMAIN=
NEXT_PUBLIC_API=

3. Start the app

npm run dev

💻 Built with

Technologies used in the project:

• ReactJS
• TypeScript
• NextJS
• Context
• NodeJS
• Storybook
• Framer motion
• Full responsive (mobile, tablet)
• Module CSS
• SEO
• API
• UI Components
• High Order Component
• NProgress
• Project architecture