Welcome to the Tesla Clone project! This full-stack web application replicates key features of Teslaβs official website, showcasing electric vehicle models with stunning visuals, interactive components, and user authentication. The app features dynamic car showcases, user authentication (via email/password and Google), Tesla feature overviews, and video trailers, offering a seamless experience for car enthusiasts.
- User Authentication:
- Login with Email and Password: Secure user authentication using traditional email/password combination.
- Login with Google: Users can log in using their Google accounts for a smoother authentication experience.
- View Tesla Features: Users can browse through all Tesla model features.
- Video Trailers: Engaging video showcases of Tesla vehicles are available, demonstrating various features and performance in real-life scenarios.
- Mobile-Responsive Design: Fully responsive UI optimized for both desktop and mobile devices.
- Smooth Page Transitions: Page transitions that enhance the overall user experience.
- Optimized Performance: Built with optimized performance in mind, ensuring fast load times.
- SEO-Friendly: Proper SEO optimizations to ensure better search engine rankings.
You can check out the live demo of the Tesla Clone project at: Live Demo
- React.js with TypeScript β for building a scalable, maintainable, and type-safe user interface.
- Vite β a fast build tool for development, ensuring quick reloads and a smooth developer experience.
- Styled-Components β for modular and dynamic styling that enhances the user experience.
- React Router β for client-side routing and smooth page transitions.
- Firebase β for authentication, real-time database, and file storage (e.g., videos, user data).
- Vercel/Netlify β for front-end hosting, providing fast and reliable content delivery.
- Firebase Hosting β for hosting both front-end and back-end in a serverless environment.
- Prettier β for code formatting to maintain consistent code style across the project.
- ESLint β for ensuring consistent code quality and identifying potential issues during development.
Follow these instructions to set up the project locally.
- Node.js (v18 or higher) - You can download it from here.
To get started, clone the repository to your local machine using the following command:
git clone https://github.com/saddamarbaa/tesla-clone-app-react-typescript.git
cd tesla-clone-app-react-typescript
Once youβve cloned the repository, navigate to the project folder and install the required dependencies:
npm install
Once youβve cloned the repository, navigate to the project folder and install the required dependencies:
Copy .env.example
to .env
and update the necessary values.
For user authentication, you'll need to set up Firebase:
- Go to the Firebase Console.
- Create a new project or select an existing project.
- Enable Firebase Authentication (Email/Password and Google).
- Copy the Firebase config and add it to the
.env
file in your project.
Once the setup is complete, you can run the project locally using:
npm run dev
This will start the development server, and you can view the app in your browser at http://localhost:3000
.
To configure the project, you'll need to add the necessary environment variables. Follow these steps:
- Copy
.env.example
to.env
. - Add your Firebase, Google API keys to the
.env
file.
Here are the environment variables you need to set:
# Firebase Configuration
VITE_REACT_APP_FIREBASE_API_KEY=""
VITE_REACT_APP_AUTH_DOMAIN=""
VITE_REACT_APP_PROJECT_ID=""
VITE_REACT_APP_STORAGE_BUCKET=""
VITE_REACT_APP_MESSAGING_SENDER_ID=""
VITE_REACT_APP_APP_ID=""
To deploy this application, follow these steps:
-
Prepare Environment Variables: Ensure that the necessary environment variables are set up in your production environment. For this project, you will need:
VITE_REACT_APP_FIREBASE_API_KEY
: Your Firebase API Key.VITE_REACT_APP_AUTH_DOMAIN
: Firebase Auth Domain.VITE_REACT_APP_PROJECT_ID
: Firebase Project ID.VITE_REACT_APP_STORAGE_BUCKET
: Firebase Storage Bucket.VITE_REACT_APP_MESSAGING_SENDER_ID
: Firebase Messaging Sender ID.VITE_REACT_APP_APP_ID
: Firebase App ID.
Important: Copy the provided
.env.example
file to a new.env
file, and fill in the necessary values for your production environment. -
Push your code to a Git repository: If you are using a service like GitHub, GitLab, or Bitbucket, push your code to a remote repository.
-
Set up a Hosting Service: You can deploy the app on platforms like:
- Install the Vercel CLI and log in.
npm i -g vercel vercel login
- Create a production build of your app.
npm run build
- Deploy the app using the Vercel CLI.
vercel --prod
- Set the necessary environment variables in the Vercel dashboard under the Environment Variables section.
- To enable automatic deployment whenever you push code to the repository, check the Vercel documentation for instructions on setting up Automatic Deployment.
- Install the Netlify CLI and log in.
npm i -g netlify-cli netlify login
- Build the project for production.
npm run build
- Deploy the app using the Netlify CLI.
netlify deploy --prod
- Set the environment variables in the Netlify dashboard under the Site Settings > Build & Deploy > Environment Variables section.
- To enable automatic deployment whenever you push code to the repository, check the Netlify documentation for instructions on setting up Auto Deployment.
- Install the Vercel CLI and log in.
-
Set up Firebase:
- Ensure that your Firebase project is properly configured. This includes enabling Firebase Authentication, Firestore, and Storage as needed.
- Use Firebase Console to manage the environment and production configuration.
- Ensure the environment variables are correctly set in your deployment platform for Firebase services to function properly.
-
Additional Considerations:
- Security: Ensure that sensitive information (like API keys) is stored securely using environment variables on your hosting platform.
- Build Process: Always run
npm run build
before deploying to production to generate optimized production-ready code.
Once deployed, your application will be live, and you can access it through the provided URL from Vercel or Netlify.
This project is licensed under the MIT License.
You are free to use, modify, and distribute the code, but please ensure you follow the terms of the license. See the LICENSE file for more details.
- GitHub Repo
- A fully functional Netflix clone built with React, TypeScript, and Vite. This project features:
- User authentication for secure sign-in and sign-up.
- Profile management for personalized content.
- Movie browsing with detailed information and trailers.
- Search functionality powered by ChatGPT, enabling intelligent recommendations and content discovery.
- Responsive design for a seamless experience across devices.
- Additional features like favorites, video streaming, and more!
- GitHub Repo
- A fully functional YouTube clone with features like video listing, search, user authentication, video playback, and more, built using React, Vite, TypeScript, and styled with Tailwind CSS. Firebase is used for authentication and storing user data.
- GitHub Repo
- A powerful RESTful API built with Node.js, Express, MongoDB, and TypeScript for managing blog posts, user authentication, and content moderation. Includes features like filtering, pagination, sorting, and full-text search. Easily customizable and scalable for various use cases.
- GitHub Repo
- A modern web application built with React, Vite, and TypeScript, integrated with the Developer Match API. It enables users to register, create and manage their profiles, and connect with other developers based on skills, interests, and technologies.
- GitHub Repo
- A movie discovery app built with React.js, Next.js, TypeScript, and Tailwind CSS, replicating the functionality of TMDB. It allows users to browse, search, and view details of movies and TV shows using TMDB's public API.
Hulu Clone App built with React Js, Next Js, TypeScript, Redux, Tailwind CSS, Vercel Hosting, with complete user authentication
- GitHub Repo
- A clone of Hulu's frontend with features like user authentication, TV show/movie management, and search functionality.
Front-End Mentor Rest Countries API Challenge app built with React Js + Next Js + TypeScript + Tailwind CSS + Vercel Hosting
- GitHub Repo
- An app displaying country data using the Rest Countries API, built with Next.js, React, and TypeScript.
- GitHub Repo
- A Google homepage clone with search functionality and responsive design, built with React, Next.js, and TypeScript.
- GitHub Repo
- A realtor platform clone with property listings, user authentication, and Firebase backend.
- GitHub Repo
- A Twitter clone app with tweet management, user authentication, and real-time updates, built with React and Next.js.
LinkedIn Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting
- GitHub Repo
- A LinkedIn clone with user authentication, profile management, and job posting features, using React and Firebase.
- GitHub Repo
- A clone of Instagram with features like image upload, user authentication, and post interactions built with React and Next.js.
- GitHub Repo
- A Facebook clone with user authentication, post creation, and social interaction features, using React and Redux.
- GitHub Repo
- A real-time messaging app clone with user authentication and message functionality, built with React, Next.js, and Material-UI.
Gmail Clone App built with React Js + Next Js + TypeScript + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting
- GitHub Repo
- A Gmail clone with email management, inbox UI, and user authentication, built with React and Firebase.
Signal Clone App built with React Native + TypeScript + Expo + React Navigation + Firebase Realtime Database + User Authentication + Passwordless Authentication with Magic Link
- GitHub Repo
- A Signal clone app with secure messaging, user authentication, and passwordless login using Magic Link, built with React Native.
WhatsApp Clone App built with React Js + React Context API + Styled Components + Material-UI + Firebase Realtime Database + Firebase Hosting
- GitHub Repo
- A WhatsApp clone featuring real-time messaging, user authentication, and Firebase backend, built with React.
- GitHub Repo
- A Slack clone with channel management, real-time messaging, and user authentication, built with React, Next.js, and Firebase.
- GitHub Repo
- A clone of Airbnb with property listings, booking functionality, and responsive design, built with React and Next.js.
- GitHub Repo
- A clone of Amazon's frontend with product listings, cart management, and user authentication, built with React and TypeScript.