My Clone of Tesla's Website with React
Explore the docs »

Report Issues · Submit Improvements

I have this great feeling of triumph and satisfaction in my previous projects that really made me think about mathematics and planning for React component interactions. However, I was never able to be fully satisfied knowing how bland they look (and also because there are still bugs I've yet to fix). Any time I tried to think of a design to revamp my BlackJackReact or 3x3-monte-dapp, I drew a blank. So, with this project focusing primarily on recreating a design, I was able to remove my creative design block from the equation and focus on the type of creativity that I enjoyed: resourcefulness. I got the idea of cloning a website from an answer to a Quora Question and chose Tesla because I follow the company and the website design looked nice.

(back to top)

Tesla's Arrow Animation:

My Arrow Animation:

CSS on Tesla's official site:

(Nothing was hidden, so I was able to find everything I need for the box shadow from the Inspect element)

• Started with the base "create-react-app" template and immediately started working on the navbar
• From my initial planning, I already had an idea of creating an array of objects, so I naturally used that to map over the array to create an element for each product
• Already planned on setting up states for when side menu is open and closed

• As of today, Tesla's official website has a banner on top of its home page advertising its 2021 Impact Report
• I thought it would be a nice touch and simple addition to the site
• Includes the cubic bezier box shadow on hover feature

• Put comments in the CSS file regarding my steps for font selection because I didn't have another place to write down my thoughts early on

• A container component for Banner and Navbar since they are both sticky components

• I originally planned on having everything the home page needed in one file, but once it started getting messy from all the HTML elements and needing different description for certain products, I created a separate Block Content template file

• I took all the elements I wrote in the original Home Page file and created a template component with JSX elements

 Note: At this point, I did think of creating a global state to just have one array with all the details of each object the site would need. But, I wanted to try passing down states since my previous projects all used React's Global Context (or maybe I was just too lazy to set it up).

• Needed a dynamic array of side menu items to change based on window size (so css can't alter state)

• Once I finished the window size hook, I just made it so that the items from the center navbar are inserted into the "menuItems" variable before its elements are mapped out into the sidemenu

(back to top)

• I avoided using template literals at first, but once I got used to it, I wish I had done more because of how much utility and flexibility they provide

• I spent a lot of time looking for a native react hook that did exactly what I wanted it to do (handle real-time resizing), but all of the search results included creating your own hook using event listeners
• I guess I wanted an easier way, but it turns out using the native window event type, "resize" was easier than I thought!

• I've been wanting to practice more CSS, but I could never come up with a creative design myself to truly be able to take pride in my work
• With that out of the equation, I was finally able to take the time to really dive into the CSS aspect

(back to top)

From my previous projects, I knew how important version control was and I knew I wanted to implement that in this project. However, I didn't actually start setting up git until I had already created most of the components. Looking back, it was most likely due to a lack of humility in the chance that my beginning code and structure could be laughably wrong. However, in comparison to my previous projects, I would say that this one didn't require as much "pulling from the roots" as the other ones did. (As of now, at least)

(back to top)

• I want to create a sign up page with form validation
• Probably not going to be linked to a back end server anytime soon, but I may add pseudo code to plan for it

• Arrow is cut off on certain browsers (especially iPhone/Safari or other browsers that have the address bar on the bottom)
• Navbar right items too close
• Tesla logo is a bit small

• Improve accuracy of arrow animation

• Opening side menu shifts header by a couple pixels
• I assume it has something to do with the side scroll

• As I found better ways to organize CSS inheritance, I made more parent components with properties that are the same as the child's

(back to top)