Bike Startup

About this project

Description:

For this project, we were assigned to develop a web application that offers customized bikes to users. The web app should allow users to customize their bikes based on their preferences, including bike type, body measurements, riding position, and color scheme. Additionally, the web app should include real-time 3D graphics to visualize bike configurations, and users should be able to make purchases directly through the app.

To create this web app, we used the following technologies: Next.js, Tailwind CSS, TypeScript, RWD, Swiper.js, SendGrid, and Styled Components. Next.js was used as the framework for the web app, allowing us to build server-rendered React applications with ease. Tailwind CSS provided a variety of pre-built styles that could be easily customized to match the design of the web app. TypeScript was used to provide type checking and better code quality. RWD was utilized to make the web app responsive on different devices, and Swiper.js allowed us to create a smooth slider experience for users. SendGrid was used to handle email notifications, and Styled Components provided CSS-in-JS capabilities for styling components.

To ensure that users could easily navigate the web app, we divided it into four main sections: "Discovering Products," "Design & Purchase," "Salesman Assistance," and "Dream Build." Each section provides a unique set of features to users, such as personalized ads, multi-step bike fitting setups, and the ability to chat with AI or a salesman.

To allow users to customize their bikes, we implemented a multi-step bike fitting setup that includes options for bike type, body measurements, riding position, and other preferences. Users can also customize the color scheme of their bikes and add additional equipment, such as lamps and water bottles. The web app features real-time 3D graphics that allow users to visualize their bike configurations and make adjustments in real-time. Users can also make purchases directly through the app, thanks to our integration of e-commerce functionality.

Overall, this web application was a success. Our team was able to deliver a user-friendly and responsive web app that provided users with the ability to create customized bikes with ease. By utilizing Next.js, Tailwind CSS, TypeScript, and other technologies, we were able to create a modern and efficient web app that exceeded our client's expectations.