0% found this document useful (0 votes)
25 views6 pages

Frontend Developer Ride Sharing App Task

The document outlines a take-home assignment for a Frontend Developer role, requiring the creation of a 'Ride Sharing App' using React.js and Next.js within 5 days. It includes a basic task with user authentication, ride booking, and profile management, along with additional features like live chat and dark mode. Submission requires a deployed demo and a private GitHub repository link, with a strict deadline for completion.

Uploaded by

Dinesh Ch
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views6 pages

Frontend Developer Ride Sharing App Task

The document outlines a take-home assignment for a Frontend Developer role, requiring the creation of a 'Ride Sharing App' using React.js and Next.js within 5 days. It includes a basic task with user authentication, ride booking, and profile management, along with additional features like live chat and dark mode. Submission requires a deployed demo and a private GitHub repository link, with a strict deadline for completion.

Uploaded by

Dinesh Ch
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Frontend Developer (React.

js)
Round 2 — Take Home Assignment

Ride Sharing App


1
Instructions

Over the next 5 days, you’ll be building a ‘Ride Sharing App’ — a web app that allows users to make and manage
cab bookings with ease:​

1.​ The take-home assignment has been broken into two parts — (a) the basic task, and (b) extra credit. For
evaluation purposes, it is only compulsory to attempt all sub-parts of (a) the basic task. The nature of extra
credit is such that you only get points for extra credit if and only if all sub-parts of (a) the basic task have
been completed and are fully functional.​

2.​ You must exclusively use [Link] to build and complete this assignment. Use the [Link] framework. It is
also compulsory to exclusively use either/and TailwindCSS or/and shadcn/ui build the UI for this assignment.​

3.​ Remember — you only have to build the frontend for this assignment. You can use dummy data wherever
necessary / random free APIs from the internet. ​

4.​ One of the most important principles of frontend development is user interface / user experience design. This
is a strong metric for evaluation, so we strongly recommend using Dribbble / Behance to find inspiration for
your application’s design.​

5.​ You have 5 days to complete this assignment. You are allowed to use any internet resources (eg. ChatGPT,
StackOverflow, Cursor, Devin, etc).​

6.​ Create a private repository on Github titled ‘FJ-FE-R2 <Your-Name> <Your-College>’ and use this repository
over the duration of this take-home assignment. Share this repository with @psrth and @paramkpr.​

7.​ Evaluation is extremely subjective and is done on an individual basis. However, the general parameters that
we look for are (in no particular order): percentage of the problem attempted, functionality, UI design,
Lighthouse score, performance, code readability, documentation, logic, code efficiency, user experience,
extra initiative.

8.​ That’s it — let’s get started!

2
Part A — The Basic Task

Your task is to develop a web application frontend where users can book rides, track their ride history, and manage
their profiles. The development of this project will be phased to ensure structured progress.

Day 1-3: Basic Functionality

1.​ User Authentication: Implement user authentication using this dummy API. Allow users to register, log in, and
manage their profiles. ​

2.​ Ride Booking: Design and implement a ride booking system where users can: Set pickup and destination
locations, and then view their ride’s route on a map. Choose ride type (e.g., economy, premium). View
estimated fare before booking. ​

3.​ Ride History: Allow users to view a history of their past rides with details such as date, fare, and driver’s
name. ​

4.​ Profile Management: Enable users to manage their profiles, including updating their information and viewing
their ride statistics.​

5.​ Payment Integration: Integrate a payment gateway to facilitate ride payments. Allow users to add, update,
and remove payment methods. (Stripe’s API testing sandbox is free-to-use).

6.​ Ride Sharing: Introduce a ride-sharing feature allowing users to share rides with others and split the fare. ​

7.​ Feedback System: Implement a feedback system where users can rate their rides and leave comments for
the driver. ​

8.​ Notification System: Set up a system to notify users of ride updates through toasts / alerts.

Day 4: Additional Features

1.​ Live Chat: Using [Link], build a live chat room between the driver and the user to coordinate the exact
pickup details.​

2.​ Dark Mode: Introduce a light/dark mode toggle to enhance the app’s visual appeal and user experience.​

3.​ Mobile Responsiveness: Ensure that the application is usable on all screen sizes.

3
Day 5: Deployment

Deploy your application to a production server to make it accessible online. Consider platforms such as Vercel,
Netlify, or AWS for deployment. Ensure the security and optimization of the application during deployment.

Day 5: Testing

Make sure that what you’ve built works reliably!

4
Part B — Additional Features

-​ Real-Time Ride Tracking: Implement real-time ride tracking, showing the user's current location and the
driver's location on a map. ​

-​ Loyalty Program: Introduce a loyalty program where users can earn points and avail discounts on future
rides. ​

-​ Integration with OpenAI: Explore any LLM-based integration that you can think of, such as a chatbot for
customer service. ​

-​ Accessibility Features: Implement accessibility features, such as voice commands and screen reader support,
to enhance the user experience for differently-abled individuals.

5
Submission

On the last day, a Google Form will be shared with you where you will have to submit the following items:​

1.​ Link to the deployed, working demo.


2.​ Link to your private Github repository.
3.​ List of tasks you were able to complete / tasks you were not able to complete.

The deadline for submission will be 11.59 PM (IST). Late submissions will not be accepted or evaluated under any
circumstances.

Best of luck!

Common questions

Powered by AI

Deployment considerations include ensuring resource allocation for scalability, optimizing app performance for fast load times, and securing user data through encryption. Platforms like Vercel or Netlify offer streamlined deployment processes, but developers need to configure settings to handle high traffic and protect sensitive information .

Real-time ride tracking significantly enhances user experience by providing transparency and reassurance about the location and estimated arrival of their ride. This feature uses mapping technologies to clearly display both the user's and driver's locations, thus minimizing uncertainty and improving trust in the service .

Feedback systems allow users to rate and comment on rides, enabling service providers to gather valuable insights into user satisfaction. By analyzing this data, companies can make informed improvements to service quality, driver behavior, and app functionality, thereby aligning services more closely with user expectations .

Integrating OpenAI's LLM could assist in deploying intelligent customer service chatbots, providing users with instant support and query resolution. The system could analyze user inquiries using natural language processing to deliver accurate responses and potentially engage users with personalized ride suggestions or promotions .

Key components for a ride-sharing app's UI design include intuitive navigation, clear visual hierarchy, and consistent design elements. Utilizing resources like Dribbble and Behance for design inspiration can help create an aesthetically pleasing and functional interface. Additionally, integrating TailwindCSS or shadcn/ui for styling supports responsive and dynamic design .

Accessibility features, such as voice commands, can significantly enhance usability for differently-abled users by providing alternative interaction methods. These features offer autonomy and convenience, allowing users with visual or mobility impairments to book rides and manage account functions without direct touchscreen interaction .

To implement user authentication in a ride-sharing app using React.js, one would leverage a dummy API, such as the one provided by "https://dummyjson.com/docs/auth" for user registration, login, and profile management. The authentication flow in React.js should include secure token handling and state management, with considerations for user experience in handling login sessions .

Using TailwindCSS or shadcn/ui contributes significantly by offering utility-first frameworks that streamline CSS management, promoting consistent styling across components. This fosters an enhanced development experience with built-in responsiveness and ease in handling state changes, which is crucial for dynamic applications like ride-sharing apps .

Strategies for seamless payment integration in React.js include using Stripe's API testing sandbox for secure transactions and offering functionalities for adding, updating, and removing payment methods. Ensuring a user-friendly interface for payment processing and testing thoroughly using Sandbox are critical for smooth operation and user trust .

Challenges in implementing a loyalty program include ensuring fair point distribution, preventing fraudulent activities, and maintaining user engagement. Addressing these involves setting clear and transparent rules, utilizing secure tracking systems for transactions, and regularly updating rewards to maintain user interest .

You might also like