Chalchitra.com

Chalchitra.com is web based platform (UI Prototype) where you can choose movies, select tickets and buy tickets.

Folder Structure

• app - includes pages, with app level routing. This is the entry point of our site, where the root layout is also defined
• assets - it contains all of our assets like images, svgs and all which we will use in our pages or components.
• atoms - it contains all the recoil atoms that we will use in our app.
• components - it contains of UI and reusable components which we use in our pages.
• interfaces - general re-usable typescript interfaces.
• lib typescript utility functions by using external libraries.
• public - it is the root directory where we add static files like images, favicons, which can be referenced by our code starting from the base URL (/).
• styles - all the stylesheets of our app contains here.

Package Manager

• I have used Bun as package manager.

Frontend Framework

• Next JS has been used as frontend framework.

Language

• TypeScript is used for better type safety.

Routing

• For routing, I am using Next JS default app routing.

Client State Management

• I am using Recoil for client-side state management.

Form Handling

• I am using React Hook Form for handling forms.
• For Form Validation, I am using Zod library.

Styling

• I am using Tailwind CSS for styling of the app.

UI Component Libraries

• For UI components I am using ShadCN UI

Sliders / Carousel

• I am using Swiper JS for adding sliders.

Icons

• Lucide Icons have been used for icons.

Dates

• date-fns has been used for handling dates.

PDF Handling

• react-to-pdf has been used for handling dates.

Screenshots