/BookUsNow

Build a website that shows upcoming and recommended events.

Primary LanguageCSS

Project Overview - BookUsNow

This project is a website designed to showcase upcoming and recommended events. It utilizes APIs to fetch event data and presents it in a user-friendly and responsive manner. The design focuses on clean aesthetics and optimal performance to provide a seamless experience for users across desktop and mobile devices.

Setup and Local Run Instructions

To run this project locally, follow these steps:

  1. Clone the repository to your local machine using Git:

    git clone https://github.com/your-username/your-repository.git
    
  2. Navigate to the project directory:

    cd your-repository
    
  3. Install the necessary dependencies using npm:

    npm install
     
  4. Start the development server:

    npm start
  5. Open your web browser and visit http://localhost:3000 to view the website locally.

Design and Technical Decisions

  • Font and Color Scheme
  • Font: Inter
  • Heading Font Color: #1E2022
  • Subtitle Font Color: #989090
  • Background Color: #ffffff
  • Logo Color: #CF2D2D
  • Stroke/Border Color: #B0BABF

API Integration

The website effectively fetches event data from the provided REST API endpoints and displays it in the appropriate sections (upcoming and recommended events).

Responsiveness

The website is designed to be fully responsive, ensuring a consistent and enjoyable user experience across various screen sizes and devices.

Horizontal Scrolling

Recommended events are presented in a horizontal scrollable format, allowing users to easily browse through them.

Lazy Loading

For upcoming events, lazy loading is implemented to fetch data page by page. The next page of events is fetched from the API only when the user scrolls to the end of the page, improving performance and user interaction.

Performance Optimization

Several optimization techniques are employed to ensure fast loading times, including minification of assets, image optimization, and caching strategies.

Code Quality

The codebase is organized, well-structured, and thoroughly documented to maintain cleanliness and readability. Comments and clear naming conventions are used throughout the codebase to enhance understanding and maintainability. For a live demonstration of the website, please visit Live Site click me

If you have any questions or feedback, feel free to reach out to [saptarishimondal@gmail.com].

Mobile Video

mobileVideo.webm

Desktop Video

laptop.webm

Screenshots

small screen

medium screen

large screen