https://github.com/saikiran76/bookusnow

https://github.com/saikiran76/bookusnow

Last synced: about 8 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/saikiran76/bookusnow
• Owner: saikiran76
• Created: 2024-04-17T05:54:14.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-21T18:44:19.000Z (7 months ago)
• Last Synced: 2024-04-30T02:53:15.805Z (6 months ago)
• Language: JavaScript
• Homepage: https://bookus-now.vercel.app
• Size: 18.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Project Overview

This is a Frontend Task @GyanGrove. This is a Event website that shows upcoming and recommended events. This is mobile responsive. And the events are fetched from the given API.

## Tech stack

1) I harnsess the capability of React for its fast pacing, diff algorithm (Reconcilation) for fast renders, and Modularity of code. So the primary choice is ReactJS

2) Used webpack bundler for optimized differential bundling of JS files, tree-shaking, and Consistent hashing

3) Used Redux for effective and optimized state management

4) Used tailwind for faster build process and advantageous styling that it provides

![image](https://github.com/saikiran76/BookusNow/assets/80874246/e0a41163-2faa-44a6-9dae-3f0df23bbc5b)

![image](https://github.com/saikiran76/BookusNow/assets/80874246/be5450bf-a66d-4da9-b731-1cff8dbc3258)

![image](https://github.com/saikiran76/BookusNow/assets/80874246/753619d0-54da-4e69-9eba-62c156412066)

## A Glimpse at the Project 

# Desktop-view

![alt text](image.png)

# Mobile View

![alt text](image-1.png)

## Technical Features

1. Redux for state management (for highly optimized data management)

2. Lazy Loading of components

3. Responsive design

4. Modular code

5. API data fetching

6. Infinite scroll for Upcoming events

7. Display of Loading state while data being fetched

## Local setup

1) Clone the repository:

    Clone the project repository to your local machine using Git. For example:

    `git clone https://github.com/saikiran76/BookusNow.git`

2) Navigate to the project directory:

    Change your working directory to the root of the cloned project:

    `cd BookusNow`

3) Install dependencies:

    Install project dependencies using npm (Node Package Manager). Run

    `npm install`

4) Build the project:

   Build the project using Webpack to generate the necessary bundled files. Run

   `npm start`

5) Access the application:

    Once the development server is running, open your web browser and navigate to `http://localhost:3000` (or a different port if specified) to access the React application.

## Design and Technical Decisions

1. The UI is designed in a way that it can be viewed on both desktop and mobile devices, ensuring maximum user accessibility. This responsiveness

2. The overall design of this app is a single page application with ReactJS as the main library, along with Redux for managing global states

3. Lazy Loading is used to optimize the rendering and for reducing size of JS bundles (only render when required)

4. Loading states are used to keep the user engaged instead of showing blanks

5. The UI has been designed keeping in mind accessibility standards, color contrasts etc.

6. Recommended events are scrollable

7. Upcoming events are Infinite scrollable

8. For optimization in state management, Redux is used primarily