ASSIGNMENT – SET 1
Academic Year: 2024–2025
Year/Sem/Branch: III / VI / IT / CSE
Subject Code & Name: 22CS23E – Full Stack Development
Regulation: 2022
Faculty Name: K. Aanandha Nachiar
Max Marks: 100
Table of Contents
1. 1. Introduction
2. 2. Tools and Technologies Used
3. 3. System Architecture
4. 4. Frontend Implementation
5. 5. Backend Implementation
6. 6. SQL Database Schema
7. 7. Sample Output
8. 8. Deployment Details
9. 9. Conclusion
1. Introduction
This assignment aims to implement a full-stack e-commerce web application. It allows users
to browse items, add them to a shopping cart, and place orders. The solution demonstrates
integration of React.js (with Fetch API and jQuery), Spring Boot, and SQL database, deployed
on a cloud platform and version-controlled with Git.
2. Tools and Technologies Used
Frontend: React.js, jQuery, AJAX
Backend: Java, Spring Boot REST
Database: MySQL / PostgreSQL
Deployment: Vercel, Render, GitHub
3. System Architecture
User (Browser) → React.js + jQuery (AJAX/Fetch) → Spring Boot REST APIs → MySQL
Database
4. Frontend Implementation
File: src/App.js
```javascript
import React, { useEffect, useState } from 'react';
import $ from 'jquery';
function App() {
const [products, setProducts] = useState([]);
const [cart, setCart] = useState([]);
useEffect(() => {
fetch('http://localhost:8080/api/products')
.then(res => res.json())
.then(data => setProducts(data));
}, []);
const addToCart = (product) => {
const updatedCart = [...cart, product];
setCart(updatedCart);
$("#cart-count").text(updatedCart.length);
};
return (
<div>
<h2>Simple E-Commerce Site</h2>
<div id="cart">Cart Items: <span id="cart-count">0</span></div>
<div className="products">
{products.map(p => (
<div key={p.id} className="product">
<h3>{p.name}</h3>
<p>Price: ${p.price}</p>
<button onClick={() => addToCart(p)}>Add to Cart</button>
</div>
))}
</div>
</div>
);
export default App;
```
5. Backend Implementation
Files:
Product.java
```java
@Entity
public class Product {
@Id @GeneratedValue
private Long id;
private String name;
private double price;
// Getters and Setters
```
ProductRepository.java
```java
public interface ProductRepository extends JpaRepository<Product, Long> {}
```
ProductController.java
```java
@RestController
@RequestMapping("/api/products")
public class ProductController {
@Autowired
private ProductRepository repo;
@GetMapping
public List<Product> getAllProducts() {
return repo.findAll();
```
ECommerceApp.java
```java
@SpringBootApplication
public class ECommerceApp {
public static void main(String[] args) {
SpringApplication.run(ECommerceApp.class, args);
```
6. SQL Database Schema
schema.sql
```sql
CREATE TABLE product (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255),
price DOUBLE
);
INSERT INTO product (name, price) VALUES
('Book', 200.0),
('Mobile', 15000.0),
('Laptop', 55000.0);
```
7. Sample Output
• Products displayed: Book, Mobile, Laptop
• On clicking 'Add to Cart', cart count updates
• Data fetched using Fetch API from backend
• REST API response in JSON format
8. Deployment Details
• Backend: Deployed on Render using JAR or Docker
• Frontend: Deployed on Vercel with GitHub
• Git used for version control with regular commits
9. Conclusion
This assignment enabled the practical application of full-stack development using modern
technologies. It helped in building and deploying a working e-commerce web application
integrating frontend, backend, database, and cloud services.
