MIT ADT University, Pune

MIT Art, Design and Technology University

MIT School of Computing, Pune
Department of Information Technology

Lab Manual
Practical - Cross Platform App
Development

Class - T.Y. IT

Batch - SMAD
Name of the Student
Mr. Vikrant Sushil Vani

A.Y. 2024 – 2025 (SEM-VI)

 MIT ADT University, Pune

Assignment No 1: Project Assignment based on Unit-I and Unit-II

Project-I
Project Title: ReactJS E-Commerce Website with Page Routing

Project Statement:

Objective:
Develop a fully functional E-commerce website using ReactJS that includes page
routing functionality for smooth navigation between different sections like Home,
Product Listing, Product Details, Cart, and Checkout.

Project Features:

1. Navigation Bar with Routing:

○ Create a Navigation Bar at the top of the website with links to:
■ Home: Displays featured products and general information
about the store.
■ Products: Lists all available products for purchase.
■ Cart: Displays the products added to the shopping cart.
■ Checkout: Allows the user to review and complete the
purchase.
■ Profile: Displays user account information and order history.
○ Implement React Router for routing between these pages.
2. Home Page:
○ The Home page should showcase highlighted products or categories.
○ Implement a product carousel or featured section.
○ Include a search bar to allow users to search for products directly.
3. Product Listing Page:
○ Create a Product Listing page that fetches products dynamically from
an API or static JSON file.
○ Each product in the list should show:
■ Product image.
■ Product name.
■ Price.
■ A button to add the product to the cart.
○ Implement React Router links on product items to navigate to the
Product Details page.
4. Product Details Page:
○ When a user clicks on a product, navigate them to the Product Details
page.
○ The Product Details page should display:
■ Full-size product image.
■ Detailed product description.
■ Price.
 MIT ADT University, Pune

■ Add to Cart button.

○ Allow users to select product quantity before adding it to the cart.
5. Cart Page:
○ Implement a Cart page that displays products added to the cart.
○ Each cart item should include:
■ Product name.
■ Product quantity.
■ Price per item and total cost for the item.
■ A button to remove items from the cart.
○ Display a total price for all items in the cart.
○ Include buttons for Continue Shopping and Proceed to Checkout.
6. Checkout Page:
○ Create a Checkout page where users can review their cart, enter
shipping information, and confirm the order.
○ Display an order summary with total cost, shipping details, and
payment options.
○ Provide a Place Order button to finalize the transaction.
7. User Profile Page:
○ Create a Profile page where users can view their account information
and order history.
○ Include a form to update the profile details (name, email, shipping
address).
8. State Management with Context API/Redux:
○ Use React Context API or Redux to manage the global state of the cart,
allowing users to add, remove, and update quantities of products
across different pages.
○ Ensure that the cart data is preserved during navigation between
pages.
9. Responsive Design:
○ Ensure the website is responsive and works well on both desktop and
mobile devices using CSS Flexbox or CSS Grid.

Technical Requirements:

● ReactJS: For building the user interface.

● React Router: For implementing page routing functionality.
● State Management: Use React Context API or Redux to manage cart
state and other global data.
● API Integration: Fetch products from a static JSON file or a mock API
(e.g., JSONPlaceholder or a custom API).
● Responsive Styling: Use CSS/SCSS to ensure the website is mobile-
friendly.
● Optional: Add localStorage or sessionStorage to persist cart data
between page reloads.
 MIT ADT University, Pune

Expected Outcome:

By completing this project, you will:

● Learn how to implement page routing in a ReactJS application using React

Router.
● Build a dynamic E-commerce website with features like product listings, cart
management, and checkout functionality.
● Gain experience with state management and ensuring the cart data persists
across different pages.
● Develop a responsive, user-friendly interface that functions well on both
mobile and desktop screens.

Assignment No 2: Project Assignment based on Unit-III, IV and V

Project-II
Project Title: React Native E-Commerce Application

Project Statement:

Objective:
Build a fully functional E-commerce mobile application using React Native that
integrates navigation, core components, user interaction, dynamic list rendering, and
state management.

Project Features:

1. User Authentication:
○Implement a simple login screen where users can enter their
credentials (username and password).
○After successful login, navigate to the Home Screen.
2. Navigation:
○Set up react-navigation to allow users to navigate between the
following screens using StackNavigator:
■ Home Screen: Displays a list of products.
■ Product Details Screen: Shows details of the selected product.
■ Cart Screen: Displays products added to the shopping cart.
■ Profile Screen: Displays user profile details.
■ Settings Screen: Allows the user to modify their account
settings.
3. Core Components & UI:
○Use core React Native components such as View, Text, Image,
StyleSheet, and Button to build a user-friendly interface.
○Apply Flexbox for layout, ensuring responsiveness across different
screen sizes.
4. Product List and Cart:
 MIT ADT University, Pune

○On the Home Screen, render the list of products using FlatList. Each
item should display a product image, name, and price.
○Implement a button for each product to add it to the Cart.
5. Handling User Interactions:
○Implement touch events to handle interactions such as adding products
to the cart, navigating to the product details, and updating the cart.
○Use onPress to trigger actions like adding a product to the cart or
navigating between screens.
6. Cart Management:
○Use React Context API for global state management to handle the cart’s
data (adding/removing products).
○Show the cart’s content and total price on the Cart Screen.
7. Product Details:
○When a user clicks on a product in the Home Screen, navigate to the
Product Details Screen and display detailed information about the
product, such as the description, image, and price.
8. Responsive Design:
○Ensure that the app is responsive, and elements adjust properly to
different screen sizes using Flexbox.
9. Rendering Lists with SectionList:
○On the Home Screen, group products by categories (e.g., electronics,
clothing) and use SectionList to render them in separate sections with
headers.

Technical Requirements:

● React Native with Expo CLI for development and testing.

● React Navigation for screen transitions.
● State Management using React Context API or useState, useReducer.
● Dynamic data rendering using FlatList and SectionList.
● Styling using StyleSheet and Flexbox for layout.

Expected Outcome:

By completing this project, students will gain hands-on experience with:

● Setting up and using React Native and React Navigation.

● Building a fully interactive mobile application with dynamic data rendering
and state management.
● Applying Flexbox for responsive layouts and managing user interactions.
● Creating a simple e-commerce app with multi-screen navigation, product
lists, and state-driven cart functionality.
 MIT ADT University, Pune

Experiment No.1

Problem Statement:
The automobile industry is evolving rapidly with constant updates in car models, technologies, and
consumer preferences. However, car enthusiasts and buyers often lack a centralized, user-friendly
platform to access up-to-date car news, detailed reviews, galleries, and service options.

TurboTalks aims to solve this gap by developing a modern, responsive, and intuitive React-based
single-page website that acts as a comprehensive car blogging platform.

Objective:

1. Develop a Responsive Car Blog Website using React.js that works seamlessly across devices.
2. Showcase Car News and Reviews in an organized and engaging manner for car enthusiasts.
3. Display High-Quality Image Galleries of various cars with responsive layouts.
4. Implement a Services Section offering car-related services (e.g., detailing, maintenance) that
users can add to a cart.
5. Enable Cart Functionality using browser storage to simulate user selections and provide a
real-world experience

Theory:

1. React.js Framework
○ Component-based architecture for reusability and modular development.
○ Functional components and JSX for rendering UI elements.
2. React Router
○ Enables client-side routing for seamless navigation between pages without reloading.
3. State Management with useState and useEffect
○ Manages dynamic data like cart items and allows local component-based logic.
4. LocalStorage API
○ Stores cart data persistently across sessions on the browser side.
5. CSS Modules / Inline Styling
○ For component-specific styling and maintaining a clean UI (dark theme, hover effects,
responsive design).
6. Responsive Web Design (RWD)
○ Media queries and flexbox used to adapt layout for different screen sizes.
7. Event Handling in React
○ Click events (e.g., Add to Cart, Remove from Cart) to update UI and local state.
8. Component Reusability
○ Building reusable components for navbars, service cards, footers, etc., promoting cleaner code.

Code:
 MIT ADT University, Pune

1. App.js -

import "./App.css";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import LoginPage from "./components/pages/login";

import RegistrationPage from "./components/pages/registration";

import HomePage from "./components/pages/home";

import CarNewsPage from "./components/pages/carnews";

import CarReviewsPage from "./components/pages/carreviews";

import ServicesPage from "./components/pages/services";

import CartPage from "./components/pages/cartpage";

function App() {

return (

<Router>

{/* <HomePage/> */}

<Routes>

<Route path="/login" element={<LoginPage />} />

<Route path="/register" element={<RegistrationPage />} />

<Route path="/home" element={<HomePage />} />

<Route path="/carnews" element={<CarNewsPage />} />

<Route path="/carreviews" element={<CarReviewsPage />} />

<Route path="/servicepage" element={<ServicesPage />} />

<Route path="/cartpage" element={<CartPage />} />

</Routes>

</Router>

);

export default App;

2. Login.jsx -
 MIT ADT University, Pune

import { useState } from "react";

import { Link, useNavigate } from "react-router-dom";

import "../css/login.css";

function LoginPage() {

const [formData, setFormData] = useState({

username: "",

password: "",

});

const [showPassword, setShowPassword] = useState(false);

const [isValid, setIsValid] = useState({

username: false,

password: false,

});

const navigate = useNavigate();

const handleInputChange = (e) => {

const { name, value } = e.target;

setFormData((prev) => ({

...prev,

[name]: value,

}));

if (name === "username") {

setIsValid((prev) => ({

...prev,

username: value.length > 5,

}));

} else if (name === "password") {

const passwordRegex =

/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;

setIsValid((prev) => ({

...prev,
 MIT ADT University, Pune

password: passwordRegex.test(value),

}));

};

const togglePasswordVisibility = (e) => {

e.preventDefault();

setShowPassword(!showPassword);

};

const handleSubmit = (e) => {

e.preventDefault();

// Add your login logic here

navigate("/home");

};

return (

<div className="loginContainer">

<form onSubmit={handleSubmit} className="form">

<div>

<h3 className="heading">JOIN THE TURBOTALKS INDIA COMMUNITY</h3>

<h3 className="heading">

<a href="https://accounts.google.com/v3/signin/identifier?hl=en-
gb&ifkv=ASKXGp3t4IG5KeJP87H40h4aBdRScxhnTvw1Bty8N8ijI0NwG9G1Yy5CRNb7sXkJhXEybkdo8twjlw&f
lowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S252556771%3A1706118587831152&theme=glif"

className="signInLink"

target="_blank"

rel="noopener noreferrer"

>

Sign In With Google

</a>

</h3>

<h3 className="heading">OR</h3>

<h4 className="heading">Member Login</h4>

 MIT ADT University, Pune

</div>

<div>

<input

type="text"

className={`input ${isValid.username ? "valid" : "invalid"}`}

placeholder="Username/Email"

name="username"

value={formData.username}

onChange={handleInputChange}

/>

<div className="passwordContainer">

<input

type={showPassword ? "text" : "password"}

className={`input ${isValid.password ? "valid" : "invalid"}`}

placeholder="Password"

name="password"

value={formData.password}

onChange={handleInputChange}

/>

<button

onClick={togglePasswordVisibility}

className="showPassButton"

>

{showPassword ? "Hide Password" : "Show Password"}

</button>

</div>

<button

type="submit"

className="loginButton"

disabled={!(isValid.username && isValid.password)}

 MIT ADT University, Pune

>

LOGIN

</button>

<Link to="/register" className="registerLink">

New To TurboTalks? Register Here

</Link>

</div>

</form>

</div>

);

export default LoginPage;

Output:

3. Registration.jsx -

import { useState } from "react";

import { Link } from "react-router-dom";

 MIT ADT University, Pune

import "../css/registration.css";

function RegistrationPage() {

const [formData, setFormData] = useState({

fullname: "",

email: "",

password: "",

cpassword: "",

phone: "",

state: "",

newsletter: false,

terms: false,

});

const [isValid, setIsValid] = useState({

fullname: false,

email: false,

password: false,

cpassword: false,

phone: false,

state: false,

});

const handleInputChange = (e) => {

const { name, value, type, checked } = e.target;

setFormData((prev) => ({

...prev,

[name]: type === "checkbox" ? checked : value,

}));

if (name === "fullname") {

setIsValid((prev) => ({

...prev,

fullname: value.length > 2,

 MIT ADT University, Pune

}));

} else if (name === "email") {

const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

setIsValid((prev) => ({

...prev,

email: emailPattern.test(value),

}));

} else if (name === "password") {

const passwordRegex =

/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;

setIsValid((prev) => ({

...prev,

password: passwordRegex.test(value),

}));

} else if (name === "cpassword") {

setIsValid((prev) => ({

...prev,

cpassword: value === formData.password,

}));

} else if (name === "phone") {

const phonePattern = /^\d{10}$/;

setIsValid((prev) => ({

...prev,

phone: phonePattern.test(value),

}));

} else if (name === "state") {

setIsValid((prev) => ({

...prev,

state: value !== "",

}));
 MIT ADT University, Pune

};

const handleSubmit = (e) => {

e.preventDefault();

console.log("Form submitted:", formData);

};

const isFormValid = () => {

return Object.values(isValid).every((value) => value) && formData.terms;

};

return (

<div className="registrationContainer">

<form onSubmit={handleSubmit} className="form">

<h3 className="heading">REGISTER AS AN TURBOTALKS ENTHUSIAST</h3>

<h4 className="heading">Account Details</h4>

<input

type="text"

className="name"

placeholder="Full Name"

name="fullname"

value={formData.fullname}

onChange={handleInputChange}

/>

<input

type="email"

className="email"

placeholder="Email"

name="email"

value={formData.email}

onChange={handleInputChange}

/>
 MIT ADT University, Pune

<div className="password-cpassword-row">

<input

type="password"

className="password"

placeholder="Password"

name="password"

value={formData.password}

onChange={handleInputChange}

/>

<input

type="password"

className="cpassword"

placeholder="Confirm Password"

name="cpassword"

value={formData.cpassword}

onChange={handleInputChange}

/>

</div>

<div className="number-menu-row">

<input

type="text"

className="number"

placeholder="Contact Number"

name="phone"

value={formData.phone}

onChange={handleInputChange}

/>

<select

className="menu"

name="state"
 MIT ADT University, Pune

value={formData.state}

onChange={handleInputChange}>

<option value="">Select Your State --</option>

<option value="Andhra Pradesh">Andhra Pradesh</option>

<option value="Arunachal Pradesh">Arunachal Pradesh</option>

<option value="Assam">Assam</option>

<option value="Bihar">Bihar</option>

<option value="Chattisgarh">Chattisgarh</option>

<option value="Goa">Goa</option>

<option value="Gujarat">Gujarat</option>

<option value="Haryana">Haryana</option>

<option value="Himachal Pradesh">Himachal Pradesh</option>

<option value="Jharkand">Jharkand</option>

<option value="Karnataka">Karnataka</option>

<option value="Kerala">Kerala</option>

<option value="Maharashtra">Maharashtra</option>

<option value="Madhya Pradesh">Madhya Pradesh</option>

<option value="Manipur">Manipur</option>

<option value="Meghalaya">Meghalaya</option>

<option value="Mizoram">Mizoram</option>

<option value="Nagaland">Nagaland</option>

<option value="Odisha">Odisha</option>

<option value="Punjab">Punjab</option>

<option value="Rajasthan">Rajasthan</option>

<option value="Sikkim">Sikkim</option>

<option value="Tamil Nadu">Tamil Nadu</option>

<option value="Telangana">Telangana</option>

<option value="Tripura">Tripura</option>

<option value="Uttar Pradesh">Uttar Pradesh</option>

<option value="Uttarakhand">Uttarakhand</option>
 MIT ADT University, Pune

<option value="West Bengal">West Bengal</option>

</select>

</div>

<div className="checkbox-row">

<label>

<input

type="checkbox"

name="newsletter"

checked={formData.newsletter}

onChange={handleInputChange}

/>

I would like to subscribe to the TurboTalks newsletter.

</label>

<label>

<input

type="checkbox"

name="terms"

checked={formData.terms}

onChange={handleInputChange}

/>

I have read all Terms & Conditions.

</label>

</div>

<button

type="submit"

className="registerButton"

disabled={!isFormValid()}

>

REGISTER

</button>
 MIT ADT University, Pune

<div>

<label className="heading">Already a member of TurboTalks?</label>

<Link to="/login" className="loginLink">

Login Here!

</Link>

</div>

</form>

</div>

);

export default RegistrationPage;

Output:

4. Home.jsx -

import "../css/home.css";

import { Link } from "react-router-dom";

import carlogo from "../assets/carlogo.jpg";

 MIT ADT University, Pune

import rolls from "../assets/rolls.jpg";

import rs6 from "../assets/rs6.jpeg";

import macan from "../assets/macan.webp";

import bmwi7 from "../assets/bmwi7.webp";

import maybach from "../assets/maybach.jpeg";

import lexus from "../assets/lexus.jpeg";

import maybachsclass from "../assets/maybachsclass.jpg";

import gt3 from "../assets/911gt3.webp";

import m5cs from "../assets/bmwm5.jpg";

import jesko from "../assets/jesko.jpg";

import { FaGithub, FaInstagram, FaLinkedin } from "react-icons/fa";

function HomePage() {

return (

<>

<div className="navdiv">

<header>

<img className="logo" src={carlogo} alt="TurboTalks Logo" />

</header>

<nav>

<Link to="/home" id="home">

Home

</Link>

<Link to="/carnews">Car News</Link>

<Link to="/carreviews">Car Reviews</Link>

<Link to="/servicepage">Services</Link>

<Link to="/cartpage" className="cart-count">

Cart

</Link>

<Link to="/login">

<button className="login-btn">LOGIN</button>
 MIT ADT University, Pune

</Link>

</nav>

</div>

<div className="image-container">

<div className="container main-content">

<p>Welcome to our car blog!</p>

<h2 className="fc">Featured Cars 2024</h2>

<div className="car-section">

<div className="car">

<img src={rolls} alt="Car 1" />

<p>

The Rolls-Royce Spectre is the first all-electric car from the

luxury carmaker. It is a sort of spiritual successor to the

Phantom and launched in India at an ex-showroom price of Rs. 7.5

crore!

</p>

</div>

<div className="car">

<img src={rs6} alt="Car 2" />

<p>

Audi is doubling down on the superwagon's success with a new

trim level called the RS6 Avant Performance.

</p>

</div>

<div className="car">

<img src={macan} alt="Car 3" />

<p>

The latest Porsche Macan gets cosmetic upgrades as well as a

slightly tweaked interior design with added features. The Macan

is one of the best driving SUVs money can buy.

 MIT ADT University, Pune

</p>

</div>

<div className="car">

<img src={bmwi7} alt="Car 4" />

<p>

With the i7, alongside the feat of electrifying the 7 Series,

the brand has also offered an exuberant occupant experience.

</p>

</div>

<div className="car">

<img src={maybach} alt="Car 5" />

<p>

The Mercedes-Maybach GLS 600 doesn't just do opulence in spades,

it can also outpace most sports cars with its AMG GT-derived

4-litre twin-turbo V8.{" "}

</p>

</div>

<div className="car">

<img src={lexus} alt="Car 6" />

<p>

Although the Lexus LX befits an ultra-luxury segment, it

commands an uncommon trait of being brute/tough.

</p>

</div>

</div>

</div>

</div>

<div className="opinions-section">

<h2>Opinions on Cars</h2>

<div className="car-opinion">
 MIT ADT University, Pune

<img src={maybachsclass} alt="Car 1" />

<div className="opinion-info">

<h3>Mercedes-Maybach S Class</h3>

<p>

An expert opinion on the features and performance of

Mercedes-Maybach S Class. The Mercedes Benz S-class is a high-end

luxury vehicle that is usually purchased through authorized

dealerships. The buying experience is expected to be smooth and

professional, with a focus on personalization and customization of

the vehicle according to the customer's preferences.

</p>

</div>

</div>

<div className="car-opinion">

<img src={gt3} alt="Car 2" />

<div className="opinion-info">

<h3>Porsche 911 GT3rs</h3>

<p>

An expert opinion on the features and performance of Porsche 911

GT3rs. One thing has certainly been true of the five previous GT3

RS generations (not counting the mid-life updates) - they've all

been true class leaders. In every case, contemporary rivals from

Ferrari, Lamborghini and everyone else wouldn't see which way the

flat-six beasts went on a racetrack, thanks to powerful engines,

low weight figures and enough aerodynamic features to make a

fighter pilot jealous.

</p>

</div>

</div>

<div className="car-opinion">
 MIT ADT University, Pune

<img src={m5cs} alt="Car 3" />

<div className="opinion-info">

<h3>BMW M5 CS</h3>

<p>

An expert opinion on the features and performance of BMW M5 CS.

Forget about the fact the M5 CS only gets 7kW more power than the

regular M5 Competition. It's totally and utterly irrelevant,

because you can't quantify this car by numbers. It is, quite

simply, the best all-round sports sedan I've ever driven, even

though it's difficult to call out any one aspect of the car that

stands out more than any other.

</p>

</div>

</div>

<div className="car-opinion">

<img src={jesko} alt="Car 4" />

<div className="opinion-info">

<h3>Koenigsegg Jesko Absolut</h3>

<p>

An expert opinion on the features and performance of Koenigsegg

Jesko Absolut Accompanying this mighty power is the groundbreaking

9-speed Koenigsegg Light Speed Transmission (LST) system, a

revelation in automotive technology, ensuring that the Jesko not

only sets new benchmarks in horsepower but also in acceleration

and engineering prowess. The Jesko doesn't just excel in power but

also in finesse, with advanced aerodynamics that generate over

1000 kg of downforce, cementing its status as an ultimate track

weapon.

</p>

</div>
 MIT ADT University, Pune

</div>

</div>

<footer>

<p>

© 2025 by Vikrant Vani |{" "}

<a href="mailto:[email protected]">

[email protected]

</a>

</p>

<ul className="socials">

<li>

<a

href="https://www.linkedin.com/in/vikrant-vani-96b329209/"

target="_blank"

rel="noopener noreferrer"

title="Linkedin"

>

<FaLinkedin />

</a>

</li>

<li>

<a

href="https://github.com/codeby-vikrant"

target="_blank"

rel="noopener noreferrer"

title="Github"

>

<FaGithub />

</a>

</li>
 MIT ADT University, Pune

<li>

<a

href="https://www.instagram.com/_.vikrant_10._/"

target="_blank"

rel="noopener noreferrer"

title="instagram"

>

<FaInstagram />

</a>

</li>

</ul>

</footer>

</>

);

export default HomePage;

Output:
 MIT ADT University, Pune

5. CarNews.jsx
 MIT ADT University, Pune

import "../css/carnews.css";

import { Link } from "react-router-dom";

import carlogo from "../assets/carlogo.jpg";

import news1 from "../assets/news1.png";

import news2 from "../assets/news2.png";

import news3 from "../assets/news3.png";

import news4 from "../assets/news4.png";

import news5 from "../assets/news5.png";

import news6 from "../assets/news6.png";

import news7 from "../assets/news7.png";

import news8 from "../assets/news8.png";

import news9 from "../assets/news9.png";

import news10 from "../assets/news10.png";

import news11 from "../assets/news11.png";

import news12 from "../assets/news12.png";

import { FaLinkedin, FaGithub, FaInstagram } from "react-icons/fa";

function CarNewsPage() {

return (

<>

<div className="navdiv">

<header>

<img className="logo" src={carlogo} alt="TurboTalks Logo" />

</header>

<nav>

<Link to="/home">Home</Link>

<Link to="/carnews" id="news">

Car News

</Link>

<Link to="/carreviews">Car Reviews</Link>

<Link to="/servicepage">Services</Link>
 MIT ADT University, Pune

<Link to="/cartpage" className="cart-count">

Cart

</Link>

<Link to="/login">

<button className="login-btn">LOGIN</button>

</Link>

</nav>

</div>

<div className="main-content">

<p>

Stay updated with the latest car news, reviews, and features right

here.

</p>

</div>

<div className="car-section">

<div className="car">

<p className="date">Published On Mar 25, 2024 09:00:00 AM</p>

<img src={news1} alt="Car Example" />

<p className="title">

Opinion: Automotive advertising - fact or fiction?

</p>

<p>

It's high time the automobile industry tightens up its advertising

claim

</p>

</div>

<div className="car">

<p className="date">Published on Mar 18, 2024 11:27:00 AM</p>

<img src={news2} alt="Car Example 2" />

<p className="title">
 MIT ADT University, Pune

Opinion: India's new EV policy offers car brands a level playing

field

</p>

<p>

New and existing players will be able to benefit from this policy

and other schem

</p>

</div>

<div className="car">

<p className="date">Published on Mar 16, 2024 09:00:00 AM</p>

<img src={news3} alt="Car Example" />

<p className="title">Opinion: Highway speed limits need rethinking</p>

<p>

Low speed limits on a 6-lane road result in dangerous braking in

front of speed cameras.

</p>

</div>

<div className="car">

<p className="date">Published on Mar 09, 2024 09:00:00 AM</p>

<img src={news4} alt="Car Example" />

<p className="title">Opinion: Cold brakes; beware</p>

<p>

Cold brakes that haven't been used or warmed up can catch you

unaware.

</p>

</div>

<div className="car">

<p className="date">Published on Mar 02, 2024 11:26:00 AM</p>

<img src={news5} alt="Car Example" />

<p className="title">
 MIT ADT University, Pune

Opinion: Maruti's upcoming hybrid tech is a masterstroke

</p>

<p>

Maruti Suzuki's upcoming series hybrids, such as the Swift, Fronx

and Baleno, could technically be defined as EVs, allowing them to

qualify for a lower GST slab.

</p>

</div>

<div className="car">

<p className="date">Published on Feb 04, 2024 09:00:00 AM</p>

<img src={news6} alt="Car Example" />

<p className="title">

Opinion: Make in India performance EVs coming soon

</p>

<p>

EVs lend themselves better to higher levels of performance and

Indian-made EVs will soon deliver over 400hp.

</p>

</div>

<div className="car">

<p className="date">Published on Jan 27, 2024 08:00:00 AM</p>

<img src={news7} alt="Car Example" />

<p className="title">

Opinion: 3 hurdles the Duster must not trip over

</p>

<p>

The Duster's comeback can be easy but there are a few hurdles

Renault must not stumble over.

</p>

</div>
 MIT ADT University, Pune

<div className="car">

<p className="date">Published on Jan 20, 2024 09:00:00 AM</p>

<img src={news8} alt="Car Example" />

<p className="title">

Opinion: Tips for automotive marketers for 2024

</p>

<p>

From sustainability to limiting the use of influencers, here's how

automotive companies can keep the momentum going this year.

</p>

</div>

<div className="car">

<p className="date">Published on Jan 02, 2024 09:00:00 AM</p>

<img src={news9} alt="Car Example" />

<p className="title">

Opinion: Cars are getting safer, but are drivers?

</p>

<p>

Regulations have made our cars safer, but road infrastructure and

driver awareness needs to catch up.

</p>

</div>

<div className="car">

<p className="date">Published on Dec 27, 2023 08:00:00 AM</p>

<img src={news10} alt="Car Example" />

<p className="title">

Opinion: Luxury carmakers should offer a better customer experience

</p>

<p>

When it comes to luxury cars, very often it's the product that holds
 MIT ADT University, Pune

more sway than the brand itself.

</p>

</div>

<div className="car">

<p className="date">Published on Nov 28, 2023 03:30:00 PM</p>

<img src={news11} alt="Car Example" />

<p className="title">The vintage elegance of the Mercedes W123</p>

<p>

Ahead of the Mercedes-Benz Classic Car Rally, here's getting behind

the wheel of the legendary 230 sedan.

</p>

</div>

<div className="car">

<p className="date">Published on Dec 16, 2023 07:00:00 AM</p>

<img src={news12} alt="Car Example" />

<p className="title">Opinion: Buying a new car as an investment</p>

<p>

New car prices have shot up recently due to tighter emissions norms,

higher input costs and long waiting periods.

</p>

</div>

</div>

<footer>

<p>

© 2024 by Vikrant Vani |{" "}

<a href="mailto:[email protected]">

[email protected]

</a>

</p>

<ul className="socials">
 MIT ADT University, Pune

<li>

<a

href="https://www.linkedin.com/in/vikrant-vani-96b329209/"

target="_blank"

rel="noopener noreferrer"

title="Linkedin"

>

<FaLinkedin />

</a>

</li>

<li>

<a

href="https://github.com/codeby-vikrant"

target="_blank"

rel="noopener noreferrer"

title="Github"

>

<FaGithub />

</a>

</li>

<li>

<a

href="https://www.instagram.com/_.vikrant_10._/"

target="_blank"

rel="noopener noreferrer"

title="instagram"

>

<FaInstagram />

</a>

</li>
 MIT ADT University, Pune

</ul>

</footer>

</>

);

export default CarNewsPage;

Output:

6. CarReviews.jsx

import "../css/carreviews.css";

import { Link } from "react-router-dom";

import carlogo from "../assets/carlogo.jpg";

import autoexpo from "../assets/autoexpo.png";

import compare from "../assets/compare.png";

import { FaLinkedin, FaGithub, FaInstagram } from "react-icons/fa";

function CarReviewsPage() {
 MIT ADT University, Pune

return (

<>

<div className="navdiv">

<header>

<img className="logo" src={carlogo} alt="Car Blog Logo" />

</header>

<nav>

<Link to="/home">Home</Link>

<Link to="/carnews">Car News</Link>

<Link to="/carreviews" style={{ color: "#ff4500" }}>

Car Reviews

</Link>

<Link to="/servicepage">Services</Link>

<Link to="/cartpage" className="cart-count">Cart</Link>

<Link to="/login">

<button className="login-btn">LOGIN</button>

</Link>

</nav>

</div>

<br />

<div className="main-content">

<section className="review-highlight">

<img src={autoexpo} alt="Highlight Car Review" />

<h2>AUTO EXPO 2023 THE BIGGEST AUTO EXTRAVAGANZA</h2>

<p>

Auto Expo is one of the world's premier auto shows. A signature

event, that witness the best minds coming together on a single

platform to showcases all that is best in the automotive world, in

terms of products, technologies, concepts and trends.

</p>
 MIT ADT University, Pune

</section>

<section className="reviews-list">

<div className="review-card">

<h3>

EXCLUSIVE : Toyota Innova HyCross ka Petrol GX Variant | Auto Expo

2023

</h3>

<iframe

width="200"

height="200"

src="https://www.youtube.com/embed/QQ-zS7RprDw"

title="Toyota Innova HyCross"

frameBorder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowFullScreen

></iframe>

<p>

The new Innova HyCross has elevated its design to a new HY. The

muscular SUV stance and stature of the new Innova HyCross is

accentuated by its glamorous yet tough Front Grille and a raised

</p>

</div>

<div className="review-card">

<h3>Yeh SUV hai Fortuner ka Big Daddy!!! | Auto Expo 2023</h3>

<iframe

width="200"

height="200"

src="https://www.youtube.com/embed/Afim_iA3038"

title="Fortuner Big Daddy"

frameBorder="0"
 MIT ADT University, Pune

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowFullScreen

></iframe>

<p>

The new Legender houses a refined 6-speed Diesel AT engine. The

power on tap complements the cutting-edge design of the Legender

seamlessly.

</p>

</div>

<div className="review-card">

<h3>Lexus LX500d - Rs 3.8 crore SUV | Auto Expo 2023</h3>

<iframe

width="200"

height="200"

src="https://www.youtube.com/embed/cJlNpZUAe9M"

title="Lexus LX500d"

frameBorder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowFullScreen

></iframe>

<p>

The LX 500d seats up to 5 people comfortably and is powered by a

V6 3.3-liter twin-turbocharged diesel engine that delivers 304

horsepower and control without compromise.

</p>

</div>

</section>

<br />

<br />

<br />
 MIT ADT University, Pune

<section className="review-highlight">

<img src={compare} alt="Highlight Car Review" />

<h2>Compare Cars 2024</h2>

<p>

Important decisions like car purchase are often confusing. The

"Compare Cars" tool from TurboTalks is designed to help you in car

comparison on the basis of prices, mileage, power, performances and

hundreds of other features and specifications. Our car comparison

tool now comes with enhanced capabilities to compare cars at version

level.

</p>

</section>

<section className="reviews-list">

<div className="review-card">

<h3>

Tata Nexon vs Maruti Brezza vs Kia Sonet vs Hyundai Venue - MAHA

COMPARISON

</h3>

<iframe

width="200"

height="200"

src="https://www.youtube.com/embed/XUEMRPppTF0"

title="SUV Comparison"

frameBorder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowFullScreen

></iframe>

<p>

In this video, we compare the big names of the compact SUV, namely

the Nexon, Sonet, Brezza and Venue and do their Asli Test. We
 MIT ADT University, Pune

compare them on the basis of boot space, performance, storage,

drive experience etc. Dive in!

</p>

</div>

<div className="review-card">

<h3>

2022 Maruti Baleno vs Tata ALTROZ vs Hyundai i20 - MAHA COMPARISON

</h3>

<iframe

width="200"

height="200"

src="https://www.youtube.com/embed/w5qDwXK472I"

title="Hatchback Comparison"

frameBorder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowFullScreen

></iframe>

<p>

Maruti Baleno vs Tata ALTROZ vs Hyundai i20 - which one should you

buy and why? We share all the details with you. Check it out in

detail. These are all 2022 models of the premium hatchbacks. In

terms of overall performance, space, features, second row space,

mileage, hill climb and even headlight throw.

</p>

</div>

<div className="review-card">

<h3>

Hyundai Verna vs Honda City vs Skoda Slavia vs VW Virtus - MAHA

COMPARISON

</h3>
 MIT ADT University, Pune

<iframe

width="200"

height="200"

src="https://www.youtube.com/embed/CT0WS2868CI"

title="Sedan Comparison"

frameBorder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowFullScreen

></iframe>

<p>

Hyundai Verna vs Honda City vs Skoda Slavia vs VW Virtus - which

one should you buy and why? We share all the details with you.

Check it out in detail. In terms of overall performance, space,

features, second row space, mileage, hill climb and even headlight

throw.

</p>

</div>

</section>

</div>

<footer>

<p>

© 2024 by Vikrant Vani |{" "}

<a href="mailto:[email protected]">

[email protected]

</a>

</p>

<ul className="socials">

<li>

<a

href="https://www.linkedin.com/in/vikrant-vani-96b329209/"
 MIT ADT University, Pune

target="_blank"

rel="noopener noreferrer"

title="Linkedin"

>

<FaLinkedin />

</a>

</li>

<li>

<a

href="https://github.com/codeby-vikrant"

target="_blank"

rel="noopener noreferrer"

title="Github"

>

<FaGithub />

</a>

</li>

<li>

<a

href="https://www.instagram.com/_.vikrant_10._/"

target="_blank"

rel="noopener noreferrer"

title="instagram"

>

<FaInstagram />

</a>

</li>

</ul>

</footer>

</>
 MIT ADT University, Pune

);

export default CarReviewsPage;

Output:
 MIT ADT University, Pune

7. Services.jsx -

import "../css/services.css";

import { useState, useEffect } from "react";

import { Link } from "react-router-dom";

import carlogo from "../assets/carlogo.jpg";

import brakeImg from "../assets/brake.jpeg";

import oilImg from "../assets/oil.webp";

import clutchImg from "../assets/clutch.jpeg";

import filterImg from "../assets/filter.jpeg";

import mirrorImg from "../assets/mirror.png";

import steerImg from "../assets/steer.png";

import { FaLinkedin, FaGithub, FaInstagram } from "react-icons/fa";

const products = [

name: "brake",

title: "Brake",
 MIT ADT University, Pune

price: 2400,

image: brakeImg,

desc: "These are steel backing plates which are bound to the surface that faces the brake discs. Brake pads
convert the kinetic energy to thermal through friction.",

},

name: "oil",

title: "Engine Oil",

price: 1000,

image: oilImg,

desc: "Fully Synthetic motor oil - It features the dynamic “Flexi-Molecule Technology” that constantly adapt
to boost protection, when your engine needs it most.",

},

name: "clutch",

title: "Clutch",

price: 4300,

image: clutchImg,

desc: "The clutch disc, also known as the clutch drive plate, is a part placed between the pressure plate of the
clutch cover and the flywheel. When the car clutch is engaged, the disc is squeezed between the friction
surfaces of these two parts.",

},

name: "filter",

title: "Filter",

price: 2100,

image: filterImg,

desc: "Car filter is essentially important as it guards engine from dust, dirt, sand and other contaminants.",

},

name: "mirror",
 MIT ADT University, Pune

title: "Side Mirror",

price: 1870,

image: mirrorImg,

desc: "Far Vision Car Side Door Mirrors are your most affordable OE replacement mirrors and they are
manufactured from the highest quality, corrosion-resistant materials to withstand all types of weather.",

},

name: "steer",

title: "Steering Wheel",

price: 5600,

image: steerImg,

desc: "Made from leather with carbon fiber inserts, the steering wheel exudes luxury and sophistication.",

},

];

function ServicesPage() {

const [cart, setCart] = useState([]);

const [cartCount, setCartCount] = useState(0);

useEffect(() => {

const stored = JSON.parse(localStorage.getItem("cart2")) || [];

setCart(stored);

setCartCount(stored.length);

}, []);

const addProduct = (product) => {

if (!cart.find((e) => e.name === product.name)) {

const newCart = [...cart, product];

setCart(newCart);

setCartCount(newCart.length);

localStorage.setItem("cart2", JSON.stringify(newCart));

};
 MIT ADT University, Pune

return (

<>

<div className="navdiv">

<header>

<img className="logo" src={carlogo} alt="Car Blog Logo" />

</header>

<nav>

<Link to="/home">Home</Link>

<Link to="/carnews">Car News</Link>

<Link to="/carreviews">Car Reviews</Link>

<Link to="/servicepage" id="service">

Services

</Link>

<Link to="/cartpage" className="cart-count">

Cart{cartCount > 0 ? ` (${cartCount})` : ""}

</Link>

<Link to="/login">

<button className="login-btn">LOGIN</button>

</Link>

</nav>

</div>

<div className="product-cart">

{products.map((product) => (

<div className="product" key={product.name}>

<h4>{product.title}</h4>

<img src={product.image} alt={product.title} />

<p>{product.desc}</p>

<p>Rs. {product.price}</p>

<button onClick={() => addProduct(product)}>Add to Cart</button>

</div>
 MIT ADT University, Pune

))}

</div>

<footer>

<p>

© 2024 by Vikrant Vani |{" "}

<a href="mailto:[email protected]">

[email protected]

</a>

</p>

<ul className="socials">

<li>

<a

href="https://www.linkedin.com/in/vikrant-vani-96b329209/"

target="_blank"

rel="noopener noreferrer"

title="Linkedin" >

<FaLinkedin />

</a>

</li>

<li>

<a

href="https://github.com/codeby-vikrant"

target="_blank"

rel="noopener noreferrer"

title="Github" >

<FaGithub />

</a>

</li>

<li>

<a
 MIT ADT University, Pune

href="https://www.instagram.com/_.vikrant_10._/"

target="_blank"

rel="noopener noreferrer"

title="instagram" >

<FaInstagram />

</a>

</li>

</ul>

</footer>

</>

);

export default ServicesPage;

Output:

8. Cart.jsx

import "../css/cartpage.css";
 MIT ADT University, Pune

import { useEffect, useState } from "react";

import { Link } from "react-router-dom";

import carlogo from "../assets/carlogo.jpg";

function CartPage() {

const [cartItems, setCartItems] = useState([]);

useEffect(() => {

const stored = JSON.parse(localStorage.getItem("cart2")) || [];

setCartItems(stored);

}, []);

const removeItem = (productName) => {

const updated = cartItems.filter((item) => item.name !== productName);

setCartItems(updated);

localStorage.setItem("cart2", JSON.stringify(updated));

};

return (

<>

<div className="navdiv">

<header>

<img className="logo" src={carlogo} alt="Car Blog Logo" />

</header>

<nav>

<Link to="/home">Home</Link>

<Link to="/carnews">Car News</Link>

<Link to="/carreviews">Car Reviews</Link>

<Link to="/servicepage">Services</Link>

<Link to="/cartpage" className="cart-count">

Cart{cartItems.length > 0 ? ` (${cartItems.length})` : ""}

</Link>

<Link to="/login">

<button className="login-btn">LOGIN</button>
 MIT ADT University, Pune

</Link>

</nav>

</div>

<div className="container">

<div className="cart-items">

{cartItems.length === 0 ? (

<p>Your cart is empty.</p>

):(

cartItems.map((item) => (

<div className="cart-item" key={item.name}>

<img

src={item.image}

alt={item.name.trim()}

className="item-image"

/>

<div className="item-details">

<h4>{item.title || item.name.trim()}</h4>

<p>Rs. {item.price}</p>

</div>

<button

className="remove-btn"

onClick={() => removeItem(item.name)}

>

Remove

</button>

</div>

))

)}

</div>

</div>
 MIT ADT University, Pune

<footer className="footer">

© 2024 Car Blog. All rights reserved.

</footer>

</>

);

export default CartPage;

Output:

Conclusion:

The TurboTalks React Website successfully delivers a sleek, responsive, and informative platform
tailored for car enthusiasts. By leveraging the power of React.js, the project demonstrates how a
 MIT ADT University, Pune

modern single-page application can provide dynamic content updates, smooth navigation, and a
user-friendly interface without page reloads.

The project also showcases a modular and scalable architecture, making it easy to maintain and
expand. With foundational components in place, the application is well-suited for further
development
 MIT ADT University, Pune

Experiment No.2

Problem Statement:

Car enthusiasts and buyers often struggle to find centralized, high-quality car reviews, specifications,
and expert opinions in a mobile-friendly format. Most content is scattered across multiple websites,
lacks personalization, or isn’t optimized for mobile users. There’s a need for a sleek, responsive app
where users can explore car reviews, ratings, and trends in a simplified and engaging format.

Objective:

To develop a React Native-based mobile application named TurboTalks that provides users with:

● A user-friendly platform to browse and read car reviews.

● Ratings, specs, and trending car highlights.
● Community-driven features like user reviews.
● A modern, responsive UI suitable for mobile devices using Expo.

Theory:

1. React Native & Expo – For cross-platform mobile app development using JavaScript and React.
2. Navigation (React Navigation) – To enable smooth tab and stack-based navigation.
3. Component-Based Architecture – Modular code using reusable components (cards, headers, tabs).
4. State Management (useState, useEffect) – For handling dynamic content and interactions.
5. FlatList / ScrollView – For rendering scrollable content like featured cars, reviews, etc.
6. UI/UX Principles – Clean layout, imagery, and readability to ensure a pleasant user experience.

Code:
1. Index.tsx

import { useState, useEffect } from 'react';

import { View, Text, StyleSheet, ScrollView, TouchableOpacity, useColorScheme, ActivityIndicator, Platform }

from 'react-native';

import { SafeAreaView } from 'react-native-safe-area-context';

import { StatusBar } from 'expo-status-bar';

import React from 'react';

import { FeaturedContent } from '@/components/home/FeaturedContent';

import { WelcomeHeader } from '@/components/home/WelcomeHeader';

import { ActionCards } from '@/components/home/ActionCards';

export default function HomeScreen() {

const [loading, setLoading] = useState(true);

const colorScheme = useColorScheme();

 MIT ADT University, Pune

const isDark = colorScheme === 'dark';

useEffect(() => {

const timer = setTimeout(() => {

setLoading(false);

}, 1000);

return () => clearTimeout(timer);

}, []);

if (loading) {

return (

<View style={[styles.container, styles.centerContent, isDark && styles.darkContainer]}>

<ActivityIndicator size="large" color={isDark ? '#4dabf7' : '#228be6'} />

<Text style={[styles.loadingText, isDark && styles.darkText]}>Loading content...</Text>

</View>

);

return (

<SafeAreaView style={[styles.container, isDark && styles.darkContainer]}>

<StatusBar style={isDark ? 'light' : 'dark'} />

<ScrollView

style={styles.scrollView}

contentContainerStyle={styles.scrollContent}

showsVerticalScrollIndicator={false}

>

<WelcomeHeader />

<FeaturedContent />

<ActionCards />

</ScrollView>

</SafeAreaView>

);

}
 MIT ADT University, Pune

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#f8f9fa',

},

darkContainer: {

backgroundColor: '#121212',

},

scrollView: {

flex: 1,

},

scrollContent: {

paddingBottom: 24,

},

centerContent: {

justifyContent: 'center',

alignItems: 'center',

},

loadingText: {

marginTop: 12,

fontSize: 16,

color: '#495057',

},

darkText: {

color: '#e9ecef',

},

infoSection: {

padding: 16,

marginHorizontal: 16,

marginTop: 24,
 MIT ADT University, Pune

backgroundColor: '#ffffff',

borderRadius: 12,

shadowColor: '#000',

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.05,

shadowRadius: 8,

elevation: 2,

},

sectionTitle: {

fontSize: 22,

fontWeight: '700',

color: '#212529',

marginBottom: 8,

},

infoText: {

fontSize: 16,

lineHeight: 24,

color: '#495057',

marginBottom: 16,

},

button: {

backgroundColor: '#228be6',

paddingVertical: 12,

paddingHorizontal: 24,

borderRadius: 8,

alignItems: 'center',

marginTop: 8,

},

buttonText: {

color: '#ffffff',
 MIT ADT University, Pune

fontSize: 16,

fontWeight: '600',

},

webHover: {

cursor: 'pointer',

},

});

2. About.tsx

import { View, Text, StyleSheet, ScrollView, Image } from 'react-native';

import { SafeAreaView } from 'react-native-safe-area-context';

import { StatusBar } from 'expo-status-bar';

import { Mail, Github, Linkedin } from 'lucide-react-native';

import React from 'react';

export default function AboutScreen() {

return (

<SafeAreaView style={styles.container}>

<StatusBar style="light" />

<ScrollView contentContainerStyle={styles.content}>

<Image

source={require('../../assets/images/profile.jpeg')}

style={styles.profileImage}

/>

<Text style={styles.name}>Vikrant Vani</Text>

<Text style={styles.title}>Automotive Journalist & Car Enthusiast</Text>

<Text style={styles.bio}>

With over 5 years of experience in automotive journalism, I've had the privilege

of testing and reviewing hundreds of cars. My passion for automobiles goes beyond

just writing - I'm a true enthusiast who lives and breathes car culture.

</Text>
 MIT ADT University, Pune

<View style={styles.statsContainer}>

<View style={styles.statItem}>

<Text style={styles.statNumber}>500+</Text>

<Text style={styles.statLabel}>Car Reviews</Text>

</View>

<View style={styles.statItem}>

<Text style={styles.statNumber}>5+</Text>

<Text style={styles.statLabel}>Years Experience</Text>

</View>

<View style={styles.statItem}>

<Text style={styles.statNumber}>50K+</Text>

<Text style={styles.statLabel}>Followers</Text>

</View>

</View>

<View style={styles.socialLinks}>

<View style={styles.socialItem}>

<Mail size={24} color="#ff3b30" />

<Text style={styles.socialText}>[email protected]</Text>

</View>

<View style={styles.socialItem}>

<Github size={24} color="#ff3b30" />

<Text style={styles.socialText}>@turbo-talks</Text>

</View>

<View style={styles.socialItem}>

<Linkedin size={24} color="#ff3b30" />

<Text style={styles.socialText}>Vikrant TurboTalks</Text>

</View>

</View>

</ScrollView>

</SafeAreaView>
 MIT ADT University, Pune

);

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#121212',

},

content: {

padding: 16,

alignItems: 'center',

},

profileImage: {

width: 150,

height: 150,

borderRadius: 75,

marginBottom: 24,

},

name: {

fontSize: 24,

fontWeight: 'bold',

color: '#ffffff',

marginBottom: 8,

},

title: {

fontSize: 16,

color: '#ff3b30',

marginBottom: 16,

},

bio: {

fontSize: 16,
 MIT ADT University, Pune

color: '#8e8e8e',

textAlign: 'center',

lineHeight: 24,

marginBottom: 24,

},

statsContainer: {

flexDirection: 'row',

justifyContent: 'space-around',

width: '100%',

marginBottom: 32,

},

statItem: {

alignItems: 'center',

},

statNumber: {

fontSize: 24,

fontWeight: 'bold',

color: '#ffffff',

marginBottom: 4,

},

statLabel: {

fontSize: 14,

color: '#8e8e8e',

},

socialLinks: {

width: '100%',

},

socialItem: {

flexDirection: 'row',

alignItems: 'center',
 MIT ADT University, Pune

backgroundColor: '#1a1a1a',

padding: 16,

borderRadius: 12,

marginBottom: 12,

},

socialText: {

marginLeft: 12,

fontSize: 16,

color: '#ffffff',

},

});

Output:
 MIT ADT University, Pune

3. Galleries.tsx

import { View, StyleSheet, FlatList, Image, Dimensions } from 'react-native';

import { SafeAreaView } from 'react-native-safe-area-context';

import { StatusBar } from 'expo-status-bar';

import React from 'react';

 MIT ADT University, Pune

const { width } = Dimensions.get('window');

const imageSize = (width - 48) / 2;

const galleryData = [

id: '1',

image: 'https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg',

},

id: '2',

image: 'https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg',

},

id: '3',

image: 'https://www.stratstone.com/-/media/stratstone/blog/2024/top-10-best-supercars-of-2024/
mclaren-750s-static-rear-1280x720px.ashx',

},

id: '4',

image: 'https://www.stratstone.com/-/media/stratstone/blog/2024/top-10-best-supercars-of-2024/
porsche-911-gt3-rs-on-nurburgring-1280x720px.ashx',

},

id: '5',

image: 'https://www.stratstone.com/-/media/stratstone/blog/2024/top-10-best-supercars-of-2024/
lamborghini-revuelto-orange-static-1920x720px.ashx',

},

id: '6',

image: 'https://www.stratstone.com/-/media/stratstone/blog/2024/top-10-best-supercars-of-2024/
ferrari-296-gtb-red-driving-dynamic-1280x720px.ashx',

},
 MIT ADT University, Pune

id: '7',

image: 'https://www.stratstone.com/-/media/stratstone/blog/2024/top-10-best-supercars-of-2024/
maserati-mc20-doors-up-1280x720px.ashx',

},

id: '8',

image: 'https://www.stratstone.com/-/media/stratstone/blog/2024/top-10-best-supercars-of-2024/
lamborghini-huracan-technica-dramatic-1280x720px.ashx',

},

id: '9',

image: 'https://www.stratstone.com/-/media/stratstone/blog/2024/top-10-best-supercars-of-2024/
mclaren-artura-static-front-1280x720px.ashx',

},

id: '10',

image: 'https://www.stratstone.com/-/media/stratstone/blog/2024/top-10-best-supercars-of-2024/audi-
r8-v10-dynamic-red-1280x720px.ashx',

},

];

export default function GalleriesScreen() {

return (

<SafeAreaView style={styles.container}>

<StatusBar style="light" />

<FlatList

data={galleryData}

renderItem={({ item }) => (

<View style={styles.imageContainer}>

<Image source={{ uri: item.image }} style={styles.image} />

</View>
 MIT ADT University, Pune

)}

keyExtractor={item => item.id}

numColumns={2}

contentContainerStyle={styles.listContent}

/>

</SafeAreaView>

);

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#121212',

},

listContent: {

padding: 16,

},

imageContainer: {

padding: 8,

},

image: {

width: imageSize,

height: imageSize,

borderRadius: 12,

},

});

Output:
 MIT ADT University, Pune

4. News.tsx

import { View, Text, StyleSheet, FlatList } from 'react-native';

import { SafeAreaView } from 'react-native-safe-area-context';

import { StatusBar } from 'expo-status-bar';

import { NewsCard } from '@/components/news/NewsCard';

 MIT ADT University, Pune

import React from 'react';

const newsData = [

id: '1',

title: 'Tesla Unveils Next-Gen Roadster',

excerpt: 'The new Tesla Roadster promises unprecedented performance...',

image: 'https://images.pexels.com/photos/14674136/pexels-photo-14674136.jpeg',

date: '2024-03-15',

},

id: '2',

title: 'BMWs Electric Future',

excerpt: 'BMW announces ambitious plans for electric vehicle lineup...',

image: 'https://images.pexels.com/photos/20706243/pexels-photo-20706243/free-photo-of-a-car-at-
sunset.jpeg',

date: '2024-03-14',

},

id: '3',

title: 'Toyota Launches All-Electric Land Cruiser',

excerpt: 'The iconic SUV gets a modern twist with zero-emission capabilities…',

image: 'https://images.pexels.com/photos/30698575/pexels-photo-30698575/free-photo-of-suv-in-the-
desert-sands-of-qatar.jpeg',

date: '2024-04-10',

},

id: '4',

title: 'Ford Mustang Mach-E GT Hits Indian Market',

excerpt: 'The performance EV brings American muscle to electric enthusiasts in India…',

image: 'https://images.pexels.com/photos/10905505/pexels-photo-10905505.jpeg',

date: '2024-03-12',
 MIT ADT University, Pune

},

id: '5',

title: 'Porsche Unveils 2025 Taycan Turbo S',

excerpt: 'With improved range and faster charging, the new Taycan sets fresh benchmarks…',

image: 'https://images.pexels.com/photos/30749352/pexels-photo-30749352/free-photo-of-modern-
police-car-in-istanbul-street-scene.jpeg',

date: '2024-03-11',

},

id: '6',

title: 'Mercedes-Benz Unveils New S-Class',

excerpt: 'Mercedes-Benz introduces the latest S-Class with cutting-edge technology...',

image: 'https://images.pexels.com/photos/17115626/pexels-photo-17115626/free-photo-of-black-
mercedes-s-class.jpeg',

date: '2024-03-10',

},

id: '7',

title: 'Hyundai Teases Ioniq 8 SUV',

excerpt: 'This futuristic electric SUV boasts over 600 km of range on a single charge…',

image: 'https://images.pexels.com/photos/11952741/pexels-photo-11952741.jpeg',

date: '2024-03-09',

},

id: '8',

title: 'Mercedes-Benz EQG Nears Production',

excerpt: 'The electric G-Wagon retains iconic ruggedness with a silent powertrain…',

image: 'https://images.pexels.com/photos/9927973/pexels-photo-9927973.jpeg',

date: '2024-03-08',

},
 MIT ADT University, Pune

id: '9',

title: 'Rimac Nevera Breaks Nürburgring EV Record',

excerpt: 'Croatia’s electric hypercar sets new standards for track performance…',

image: 'https://images.pexels.com/photos/29410854/pexels-photo-29410854/free-photo-of-luxury-
electric-sports-car-on-display.jpeg',

date: '2024-03-07',

},

id: '10',

title: 'Kia EV9 Officially Launched Globally',

excerpt: 'Kia’s flagship electric SUV brings bold design and family-first features…',

image: 'https://images.pexels.com/photos/31212857/pexels-photo-31212857/free-photo-of-kia-ev9-gt-
line-electric-car-on-sandy-beach.jpeg',

date: '2024-03-06',

},

];

export default function NewsScreen() {

return (

<SafeAreaView style={styles.container}>

<StatusBar style="light" />

<FlatList

data={newsData}

renderItem={({ item }) => <NewsCard news={item} />}

keyExtractor={item => item.id}

contentContainerStyle={styles.listContent}

/>

</SafeAreaView>

);

const styles = StyleSheet.create({

 MIT ADT University, Pune

container: {

flex: 1,

backgroundColor: '#121212',

},

listContent: {

padding: 16,

},

});

Output:
 MIT ADT University, Pune

5. Services.tsx

import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';

import { SafeAreaView } from 'react-native-safe-area-context';

import { StatusBar } from 'expo-status-bar';

 MIT ADT University, Pune

import { PenTool as Tool, Camera, FileText, MessageCircle } from 'lucide-react-native';

import React from 'react';

export default function ServicesScreen() {

const services = [

id: '1',

title: 'Car Inspections',

description: 'Professional pre-purchase inspections',

icon: <Tool size={24} color="#ff3b30" />,

},

id: '2',

title: 'Photo Shoots',

description: 'Professional car photography',

icon: <Camera size={24} color="#ff3b30" />,

},

id: '3',

title: 'Consultation',

description: 'Expert car buying advice',

icon: <FileText size={24} color="#ff3b30" />,

},

id: '4',

title: 'Car Community',

description: 'Join our enthusiast community',

icon: <MessageCircle size={24} color="#ff3b30" />,

},

];
 MIT ADT University, Pune

return (

<SafeAreaView style={styles.container}>

<StatusBar style="light" />

<ScrollView contentContainerStyle={styles.content}>

<Text style={styles.title}>Our Services</Text>

<Text style={styles.subtitle}>Expert automotive services for enthusiasts</Text>

<View style={styles.servicesGrid}>

{services.map(service => (

<TouchableOpacity key={service.id} style={styles.serviceCard}>

<View style={styles.iconContainer}>

{service.icon}

</View>

<Text style={styles.serviceTitle}>{service.title}</Text>

<Text style={styles.serviceDescription}>{service.description}</Text>

</TouchableOpacity>

))}

</View>

</ScrollView>

</SafeAreaView>

);

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#121212',

},

content: {

padding: 16,

},

title: {
 MIT ADT University, Pune

fontSize: 28,

fontWeight: 'bold',

color: '#ffffff',

marginBottom: 8,

},

subtitle: {

fontSize: 16,

color: '#8e8e8e',

marginBottom: 24,

},

servicesGrid: {

flexDirection: 'row',

flexWrap: 'wrap',

justifyContent: 'space-between',

},

serviceCard: {

width: '48%',

backgroundColor: '#1a1a1a',

borderRadius: 12,

padding: 16,

marginBottom: 16,

},

iconContainer: {

width: 48,

height: 48,

borderRadius: 24,

backgroundColor: 'rgba(255, 59, 48, 0.1)',

justifyContent: 'center',

alignItems: 'center',

marginBottom: 12,
 MIT ADT University, Pune

},

serviceTitle: {

fontSize: 16,

fontWeight: '600',

color: '#ffffff',

marginBottom: 8,

},

serviceDescription: {

fontSize: 14,

color: '#8e8e8e',

},

});

Output:
 MIT ADT University, Pune

6. Review.tsx

import { View, Text, StyleSheet, FlatList } from 'react-native';

 MIT ADT University, Pune

import { SafeAreaView } from 'react-native-safe-area-context';

import { StatusBar } from 'expo-status-bar';

import { ReviewCard } from '@/components/reviews/ReviewCard';

import React from 'react';

const reviewsData = [

id: '1',

carName: '2024 Ferrari 296 GTB',

rating: 4.8,

excerpt: 'A plug-in hybrid supercar that blends electrification with raw Ferrari thrill…',

image: 'https://images.pexels.com/photos/337909/pexels-photo-337909.jpeg',

},

id: '2',

carName: '2024 Lamborghini Revuelto',

rating: 4.5,

excerpt: 'Lamborghini’s first V12 hybrid delivers insane power and signature drama…',

image: 'https://images.pexels.com/photos/16170477/pexels-photo-16170477/free-photo-of-modern-red-
sports-car.jpeg',

},

id: '3',

carName: '2024 Audi RS6 Avant Performance',

rating: 4.7,

excerpt: 'This wagon defies expectations with blistering speed and everyday usability…',

image: 'https://images.pexels.com/photos/19368036/pexels-photo-19368036/free-photo-of-back-view-of-
audi-rs6.png',

},

id: '4',

carName: '2024 Aston Martin DB12',

 MIT ADT University, Pune

rating: 4.6,

excerpt: 'Luxury meets aggression in this beautiful evolution of the DB series…',

image: 'https://images.pexels.com/photos/8190663/pexels-photo-8190663.jpeg',

},

id: '5',

carName: '2024 Corvette Z06',

rating: 4.8,

excerpt: 'America’s mid-engine marvel pushes boundaries with a screaming flat-plane V8…',

image: 'https://images.pexels.com/photos/17653620/pexels-photo-17653620/free-photo-of-chevrolet-
corvette-z06.jpeg',

},

];

export default function ReviewsScreen() {

return (

<SafeAreaView style={styles.container}>

<StatusBar style="light" />

<FlatList

data={reviewsData}

renderItem={({ item }) => <ReviewCard review={item} />}

keyExtractor={item => item.id}

contentContainerStyle={styles.listContent}

/>

</SafeAreaView>

);

const styles = StyleSheet.create({

container: {

flex: 1,
 MIT ADT University, Pune

backgroundColor: '#121212',

},

listContent: {

padding: 16,

},

});

Output:
 MIT ADT University, Pune

7. Home.tsx

import { View, Text, StyleSheet, TouchableOpacity, useColorScheme } from 'react-native';

import { BookOpen, CarFront, FileText, Search, Send, Star, Upload, Users } from 'lucide-react-native';
 MIT ADT University, Pune

import React = require('react');

export function ActionCards() {

const colorScheme = useColorScheme();

const isDark = colorScheme === 'dark';

const actions = [

id: '1',

title: 'Latest Reviews',

description: 'Instantly view the most recent car reviews and ratings.',

icon: <CarFront size={24} color="#4c6ef5" />,

backgroundColor: '#edf2ff',

textColor: '#4c6ef5',

},

id: '2',

title: 'Search Cars',

description: 'Quickly search for car models, brands, or specs.',

icon: <Search size={24} color="#37b24d" />,

backgroundColor: '#ebfbee',

textColor: '#37b24d',

},

id: '3',

title: 'Top Rated',

description: 'Browse the highest-rated cars across all categories.',

icon: <Star size={24} color="#f76707" />,

backgroundColor: '#fff4e6',

textColor: '#f76707',

},

{
 MIT ADT University, Pune

id: '4',

title: 'Submit a Review',

description: 'Let users post their own car experiences and ratings.',

icon: <Send size={24} color="#ae3ec9" />,

backgroundColor: '#f3d9fa',

textColor: '#ae3ec9',

},

];

return (

<View style={styles.container}>

<Text style={[styles.sectionTitle, isDark && styles.darkText]}>

Quick Actions

</Text>

<View style={styles.grid}>

{actions.map(action => (

<TouchableOpacity

key={action.id}

style={[

styles.card,

{ backgroundColor: isDark ? '#212529' : action.backgroundColor }

]}

activeOpacity={0.8}

>

<View style={styles.iconContainer}>

{action.icon}

</View>

<Text

style={[

styles.cardTitle,

{ color: isDark ? '#f8f9fa' : action.textColor }

 MIT ADT University, Pune

]}

>

{action.title}

</Text>

<Text style={styles.cardDescription}>

{action.description}

</Text>

</TouchableOpacity>

))}

</View>

</View>

);

const styles = StyleSheet.create({

container: {

paddingHorizontal: 16,

marginBottom: 24,

},

sectionTitle: {

fontSize: 20,

fontWeight: '700',

color: '#212529',

marginBottom: 16,

},

darkText: {

color: '#f8f9fa',

},

grid: {

flexDirection: 'row',

flexWrap: 'wrap',
 MIT ADT University, Pune

justifyContent: 'space-between',

},

card: {

width: '48%',

padding: 16,

borderRadius: 12,

marginBottom: 16,

},

iconContainer: {

marginBottom: 12,

},

cardTitle: {

fontSize: 16,

fontWeight: '600',

marginBottom: 4,

},

cardDescription: {

fontSize: 14,

color: '#6c757d',

},

});

import { View, Text, StyleSheet, Image, TouchableOpacity, useColorScheme, Dimensions } from 'react-native';

import { ArrowRight } from 'lucide-react-native';

import React = require('react');

const { width } = Dimensions.get('window');

const cardWidth = width > 500 ? (width - 64) / 2 : width - 32;

export function FeaturedContent() {

const colorScheme = useColorScheme();

const isDark = colorScheme === 'dark';

const featuredItems = [
 MIT ADT University, Pune

id: '1',

title: 'Trending Cars',

description: 'Explore what\'s hot in the car world right now. Showcase currently popular or most viewed
cars on the platform.',

image: 'https://images.pexels.com/photos/3764984/pexels-photo-3764984.jpeg?
auto=compress&cs=tinysrgb&w=1200',

},

id: '2',

title: 'Expert Picks',

description: 'Top recommendations from automotive experts. Highlight editor\'s choice vehicles or staff-
curated content.',

image: 'https://images.pexels.com/photos/8052843/pexels-photo-8052843.jpeg?
auto=compress&cs=tinysrgb&w=1200',

},

];

return (

<View style={styles.container}>

<View style={styles.headerRow}>

<Text style={[styles.sectionTitle, isDark && styles.darkText]}>

Featured

</Text>

<TouchableOpacity style={styles.viewAllButton}>

<Text style={styles.viewAllText}>View all</Text>

<ArrowRight size={16} color="#228be6" />

</TouchableOpacity>

</View>

<View style={styles.cardsContainer}>

{featuredItems.map(item => (
 MIT ADT University, Pune

<TouchableOpacity

key={item.id}

style={[

styles.card,

isDark && styles.darkCard,

{ width: cardWidth }

]}

activeOpacity={0.9}

>

<Image

source={{ uri: item.image }}

style={styles.cardImage}

resizeMode="cover"

/>

<View style={styles.cardContent}>

<Text style={[styles.cardTitle, isDark && styles.darkText]}>

{item.title}

</Text>

<Text style={styles.cardDescription}>

{item.description}

</Text>

</View>

</TouchableOpacity>

))}

</View>

</View>

);

const styles = StyleSheet.create({

 MIT ADT University, Pune

container: {

marginBottom: 24,

},

headerRow: {

flexDirection: 'row',

justifyContent: 'space-between',

alignItems: 'center',

paddingHorizontal: 16,

marginBottom: 16,

},

sectionTitle: {

fontSize: 20,

fontWeight: '700',

color: '#212529',

},

darkText: {

color: '#f8f9fa',

},

viewAllButton: {

flexDirection: 'row',

alignItems: 'center',

},

viewAllText: {

fontSize: 14,

color: '#228be6',

marginRight: 4,

},

cardsContainer: {

flexDirection: 'row',

flexWrap: 'wrap',
 MIT ADT University, Pune

justifyContent: 'space-between',

paddingHorizontal: 16,

},

card: {

borderRadius: 12,

backgroundColor: '#ffffff',

shadowColor: '#000',

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.08,

shadowRadius: 8,

elevation: 2,

marginBottom: 16,

overflow: 'hidden',

},

darkCard: {

backgroundColor: '#212529',

},

cardImage: {

width: '100%',

height: 120,

},

cardContent: {

padding: 16,

},

cardTitle: {

fontSize: 16,

fontWeight: '700',

color: '#212529',

marginBottom: 8,

},
 MIT ADT University, Pune

cardDescription: {

fontSize: 14,

color: '#6c757d',

lineHeight: 20,

},

});

import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';

import React = require('react');

export function FeaturedPost() {

return (

<View style={styles.container}>

<Text style={styles.sectionTitle}>Featured Post</Text>

<TouchableOpacity style={styles.card} activeOpacity={0.8}>

<Image

source={{ uri: 'https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg' }}

style={styles.image}

/>

<View style={styles.content}>

<Text style={styles.tag}>Featured</Text>

<Text style={styles.title}>The Future of Electric Supercars</Text>

<Text style={styles.excerpt}>

Exploring how electric powertrains are revolutionizing the supercar segment...

</Text>

<Text style={styles.readMore}>Read More →</Text>

</View>

</TouchableOpacity>

</View>

);

const styles = StyleSheet.create({

 MIT ADT University, Pune

container: {

padding: 16,

},

sectionTitle: {

fontSize: 20,

fontWeight: 'bold',

color: '#ffffff',

marginBottom: 16,

},

card: {

backgroundColor: '#1a1a1a',

borderRadius: 12,

overflow: 'hidden',

},

image: {

width: '100%',

height: 200,

},

content: {

padding: 16,

},

tag: {

color: '#ff3b30',

fontSize: 14,

fontWeight: '600',

marginBottom: 8,

},

title: {

fontSize: 20,

fontWeight: 'bold',
 MIT ADT University, Pune

color: '#ffffff',

marginBottom: 8,

},

excerpt: {

fontSize: 16,

color: '#8e8e8e',

marginBottom: 16,

},

readMore: {

fontSize: 16,

color: '#ff3b30',

fontWeight: '600',

},

});

import { View, Text, StyleSheet, useColorScheme } from 'react-native';

import React = require('react');

export function WelcomeHeader() {

const colorScheme = useColorScheme();

const isDark = colorScheme === 'dark';

return (

<View style={styles.container}>

<Text style={[styles.greeting, isDark && styles.darkText]}>

Hello,

</Text>

<Text style={[styles.userName, isDark && styles.darkText]}>

Turbo-Talks User

</Text>

<Text style={styles.welcomeMessage}>

Welcome back to your dashboard!

</Text>
 MIT ADT University, Pune

</View>

);

const styles = StyleSheet.create({

container: {

padding: 16,

marginBottom: 16,

},

greeting: {

fontSize: 16,

color: '#495057',

marginBottom: 4,

},

userName: {

fontSize: 28,

fontWeight: '700',

color: '#212529',

marginBottom: 8,

},

welcomeMessage: {

fontSize: 16,

color: '#6c757d',

},

darkText: {

color: '#f8f9fa',

},

});

Output:
MIT ADT University, Pune
MIT ADT University, Pune
 MIT ADT University, Pune

Conclusion:

The TurboTalks app successfully delivers an interactive and informative platform for car
enthusiasts. By leveraging React Native with Expo, it ensures cross-platform performance and a
native-like experience. The app provides quick access to trending car info, expert picks, and user
reviews—all in one sleek, mobile interface. It simplifies the research process for users while keeping
them updated with the latest in the automotive world.