The Dealership

About

Welcome to The Dealership, a car visualizer built for a prospective small auto-business looking to move their platform and increase their presence on the internet. In today's heavily virtual world, everything we do is steadily being transferred online. Whether that would be banking for cryptocurrency, playing for recreation, or shopping online; the fact of that matter is that's much more efficient to do these tasks online now. The Dealership aims to provide a resource for companies, specifically in the auto industry, to adapt to today’s world and reach new heights through client-driven visions of their dream cars.

I achieved my vision for this app through the primary use of React.js and Node.js. I used the traditional class structure for our most basic functions as well as more modern hooks specifically for price calculations. I specifically used three models from Tesla motors because of the accessibility to their product photos as well as their beautiful and fluid designs. While I did take inspiration from Tesla and other auto companies' car visualizers, I wanted to build an app that covered all the aspects of the car on one platform. Furthermore, I integrated this with my custom-built and dark-themes HTML, CSS, and javascript website. I hosted this website on Netlify as a service and created a contact form that both saves on netlify’s local server but also emails me a message.

Overall, I hoped from this project was to make a tool that local auto-companies can use to transition themselves into an online platform for their services. I was able to achieve my primary goals of this app to have a design feature, costs per vehicle, and overall facts about the car, all in one place. I will be furthering this project by building features that allow the car to be visualized even better through 3d modeling and by creating an even better user interface.

I hope you enjoyed my project! Abhijith Varma Mudunuri

What's the inspiration behind the project?

Recently, my family purchased a new car, and I witnessed all the steps that I had to go through with the dealership in order to set this transaction up. Talking with that particular car salesman, he explained to me that his dealership didn’t have the resources for an online platform, and this inspired me to set up The Dealership, an app that visualizes, designs, and clearly showcases cars online. Overall, I hope that this project can be used by a small auto-business to further their goals and increase their presence in the ever more online world.

What does your project do?

The Dealership’s main purpose is to provide a space where every part of the decision-making process of buying a car can be done in line. From picking the model, choosing the color, and selecting the features, The Dealership provides the user with this experience all while clearly showcasing the price with the buyer’s budget in mind.

How did you create your project?

I chose to create this application using React.js, Node.js, HTML, CSS, and JavaScript. I used React.js and Node.js to create the actual web application for visualizing the car. I utilized classes to make the basic functions of the app such as navigation, saving, and various buttons. For displaying and calculating prices in real-time I utilized react hooks to make this feature possible.

For my frontend, I used HTML, CSS, and JavaScript to code my website, and the various pages include the home page as well as an about page. I hosted this site on Netlify, a Platform as a service (Paas), and connected it directly to our Github Repo. I set it up so that each time I pushed a commit, the app would update automatically. This made collaboration more efficient and I was able to integrate our various parts effectively. Furthermore, I also create a contact form on the website and connected it to Netlify’s database through the use of a webhook. This made it so that each form submission would be both saved on Netlify’s servers, and would also email a copy of the submission to me.

By using all of these skills and programming languages in tandem, I created an automated and cohesive web application that I believe will change the future of the auto industry.

What are some challenges you encountered?

Initially, an abostacle that I found using React itself. This is my first time using this type of js and also my first solo hackathon, so both the format and even the process of testing React were new to me. However, through each line of code and each GitHub commit, my experience only increased and now I’m much more comfortable using React than I was before.

Another issue I had was the hosting on Netlify. This software was very specific and picky about format and file sizes so I initially had a lot of trouble even figuring out what was going on. However, through this experience, I have learned the exceptional value of the command line. I went through each of the errors step by step and was eventually able to deploy my app and even host it on netlify’s databases.

Accomplishments?

I am very proud of what I've done with The Dealership. Starting off, I had a goal and vision of what I wanted to build, and this is exactly what I was looking to do. I specifically love how everything you need in the app is in one place, and that makes it really easy to use and interact with.

What did you learn?

I developed my React, Node, HTML, CSS, and JavaScript skills to be more advanced than they were before, especially with different types of animations and elements in HTML. I also explored Netlify further and now can work with the command line and debug much more efficiently.

What’s next for The Dealership?

My next steps for this project are to implement a 3d model that will allow the user to view the project from different angles and viewpoints. This will be unique and give the client a new perspective to look from. I also hope that this service can be used by a local auto-company to further their needs to transition to a virtual platform. Through these next steps for The Dealership, I hope to expand its usage across more and more people and make it even easier and more to purchase your dream car!

Built With

• css3
• html5
• javascript
• netlify
• node.js
• react
• react.js