Etkinlix is a responsive, interactive single-page web application built with Next.js and React, designed to provide a seamless user experience across desktop and mobile devices. This project follows modern front-end development practices, including TypeScript for type safety, Tailwind CSS for styling, and SEO optimizations.
You can view the live demo of the project here: Etkinlix Live Demo
- Responsive Design: Fully responsive, optimized for desktop and mobile with no breakage on mid-screen sizes like tablets.
- Interactive Components: All UI components are functional, including clickable buttons and functional filters. Mock data is used for demonstration.
- Tailwind CSS: Tailwind CSS is used to simplify styling, making it easy to create a responsive and consistent UI.
- TypeScript: Ensures type safety across the project, helping prevent runtime errors.
- Next.js App Router: Built using the latest app router in Next.js, offering enhanced routing and layout features.
- Figma Integration: UI components are developed based on the provided Figma design, ensuring pixel-perfect implementation.
- Optional Enhancements: Includes optional features such as animation and SEO best practices.
- React: A JavaScript library for building user interfaces.
- Next.js: A React framework with server-side rendering, static site generation, and the app router for flexible routing and layouts.
- Tailwind CSS: A utility-first CSS framework for responsive design.
- TypeScript: A typed superset of JavaScript.
- clsx: A utility for dynamically applying class names.
- Sharp: An image processing library for optimizing performance.
- Prettier: A code formatter with Tailwind CSS plugin integration for consistent formatting.
Clone the project
git clone https://github.com/zulalnb/etkinlix.gitGo to the project directory
cd etkinlixInstall dependencies
npm installRun the development server:
npm run devOpen http://localhost:3000 to view the app in the browser.
To create an optimized production build:
npm run buildThen start the server:
npm run start