Summer Training Project Report
On
Web development at CodecTechnologies
Project Report is submitted in partially Fulfillment of
requirements of
Bachelor of Computer Applications
Sri Guru Tegh Bahadur Institute Of
Management & Information Technology
(AFFILIATED TO GURU GOBIND SINGH
INDRAPRASTHA UNIVERSITY)
Submitted to : Ms Nisha Chaudhary
Submitted by: Mitesh Uniyal
CERTIFICATE
This is to certify that Mitesh Uniyal ,with enrollment
number 04690202023,has successfully completed the
project titled “Web Development Project.” This project
has been submitted as a part of the requirements for
the Bachelor of Computer Applications (BCA) degree in
the department of BCA , under the guidance of Ms
Nisha Chaudhary
We acknowledge the effort and dedication shown by
the student throughout the project duration.
Signature of project – incharge
Ms Nisha Chaudhary
ACKNOWLEDGEMENT
With profound sense of gratitude and regard, I express my
sincere thanks to my guide and mentor Ms. Rachna Singh
for her valuable guidance and the confidence she instilled
in me, that helped me in the successful completion of this
project report. Without her help, this project would have
been a distant affair, her thorough understanding of the
subject and professional guidance was indeed of
immense help to me.
I am also greatly thankful to the faculty members of our
institute who co- operated with me and gave me their
valuable time
This project would not have been possible without the
encouragement and support of my mentor and those
around me. Thank you all for contributing to my journey.
Place: Delhi Signature of student
Mitesh
(04690202023)
ABSTRACT
This report presents the outcomes of my one-month Summer
Training at Codec Technologies, where I developed an E-
Commerce Product Catalog Website.
The training aimed to provide practical exposure in the field
of web development, focusing on building a responsive,
user-friendly catalog that allows browsing, searching, and
simulating cart functionality.
Key learning areas included:
• Frontend Development using HTML, CSS, Tailwind for
layout and design.
• Client-Side Scripting with JavaScript for interactivity.
• Project Design Techniques like ER diagrams, Data Flow
Diagrams, and Use Case diagrams.
• Testing Methodologies to ensure responsiveness and
usability.
The project demonstrates the importance of e-commerce
platforms in the modern era, especially for small businesses
that cannot afford costly solutions.
.
List of Figures
Figure number Description Page number
1 Entity relation diagram
2 DFD LEVEL 0
3 DFD LEVEL 1
TABLE OF CONTENT
S. No. Topic Page No.
1 Chapter 1: Problem Formulation
1.1 Introduction about the Company
1.2 Introduction about the Problem
1.3 Present State of the Art
1.4 Need of Computerization
1.5 Proposed Software/Project
1.6 Importance of the Work
2 Chapter 2: System Analysis
2.1 Feasibility Study
2.2 Analysis Methodology
2.3 Choice of Platforms
2.3.1 Software Used
2.3.2 Hardware Used
3 Chapter 3: System Design
3.1 Design Methodology
3.2 Database Design
3.2.1 ER Diagram
3.2.2 DFD
3.3 Input Design
S. No. Topic Page No.
3.4 Output Design
3.5 Code Design and Development
4 Chapter 4: Testing & Implementation
4.1 Testing Methodology
4.1.1 Unit Testing
4.1.2 Module Testing
4.1.3 Integration Testing
4.1.4 System Testing
4.1.5 White Box / Black Box Testing
4.2 Test Data and Test Cases
4.3 Test Reports and Debugging
5 Chapter 5: Conclusion and References
5.1 Conclusion
5.2 Limitations of the System
5.3 Future Scope for Modification
5.4 References/Bibliography
6 Chapter 6: Annexures
A-1 Sample Inputs
A-2 Sample Outputs
A-3 Coding (Optional)
CHAPTER:1
PROBLEM FORMULATION
1.1 Introduction about the Company
Codec Technologies is a training and development company that specializes in
modern web development technologies such as React, Tailwind CSS, JavaScript,
and cloud-based solutions. The organization provides students with the opportunity
to work on industry-relevant projects to gain hands-on experience.
During my one-month summer training, I worked on a live project “E-Commerce
Website for Sneakers”, where I designed and developed a fully responsive web
application for browsing sneakers. The training emphasized modern frontend
frameworks like React combined with Tailwind CSS for styling, ensuring faster
development and better user interface design.
1.2 Introduction about the Problem
In recent years, sneakers have evolved from being simple footwear to becoming
fashion statements and collectibles. Young customers and sneaker enthusiasts
often face several problems:
1. Limited Access to Products: Premium sneakers are often available only in
selected stores or regions.
2. Lack of Organized Catalogs: Many small or independent sellers don’t have
professional websites, making it difficult for buyers to browse collections.
3. Time-Consuming Shopping: Customers must physically visit stores to check
availability and designs.
4. Competition with Big Players: Platforms like Nike, Adidas, or Flipkart
dominate the sneaker market, making it challenging for small vendors to
compete digitally.
Thus, there is a need for a dedicated online sneaker catalog website that provides:
• Centralized browsing of sneakers.
• A visually appealing and responsive interface.
• Smooth navigation and product detail views.
1.3 Present State of the Art
Currently, the sneaker industry is dominated by:
• Global Brands (Nike, Adidas, Puma): Their websites/apps are highly
advanced, with AR try-ons, recommendation engines, and integrated
checkout.
• E-commerce Giants (Amazon, Flipkart, StockX): These platforms sell
sneakers but often clutter the catalog with multiple sellers, making browsing
less focused.
• Streetwear & Independent Brands: Smaller businesses rely heavily on
Instagram pages or WhatsApp catalogs, which lack professional features.
While big platforms provide complete shopping ecosystems, they are often
complex and resource-heavy. Small-scale vendors need simple, lightweight, cost-
effective websites to digitally showcase sneakers.
1.4 Need of Computerization
The sneaker business relies heavily on visual appeal and fast access.
Computerizing the catalog through a responsive website provides several
advantages:
1. 24x7 Availability: Customers can browse sneaker collections anytime,
anywhere.
2. Better Presentation: High-quality images and responsive layouts give a
professional feel.
3. Customer Convenience: Filtering and searching sneakers saves time.
4. Reach Beyond Boundaries: Even small sellers can showcase products
globally.
5. Mobile-First Experience: With most sneaker lovers browsing via
smartphones, a responsive React + Tailwind website ensures mobile
optimization.
1.5 Proposed Software / Project
The proposed project is an E-Commerce Sneakers Catalog Website designed using
HTML, CSS, Tailwind CSS, and React.
Key Features:
• Product Catalog Page: Displays sneakers in a responsive grid with pricing
and quick view.
• Product Details Page: Shows larger images, descriptions, sizes, and prices.
• Cart Simulation: Users can add/remove sneakers from a virtual cart
(simulation only).
• Responsive UI/UX: Tailwind CSS ensures fast, modern, and mobile-first
design.
• React Components: Each feature (product card, cart, navbar) is modular and
reusable.
• Scalable: Backend (Node.js, Express, MongoDB/MySQL) can be added later
for real checkout, authentication, and payments.
1.6 Importance of the Work
The importance of this project can be seen from two perspectives:
For Businesses:
• Helps independent sneaker sellers or small shops to go online.
• Offers a low-cost, modern solution compared to heavy e-commerce
systems.
• Provides a platform to attract sneaker enthusiasts with a visually rich
catalog.
For Learning/Academic Value:
• Strengthened my knowledge of React.js, Tailwind CSS, and frontend design
patterns.
• Gave me experience in responsive design, modular coding, and debugging.
• Improved my understanding of e-commerce workflows like product listings,
detail views, and cart functionality.
CHAPTER 2:
SYSTEM ANALYSIS
2.1 Feasibility Study
The project was found feasible on the following grounds:
Technical Feasibility: Tools like React, Tailwind CSS, and JavaScript are
open-source and run smoothly on standard hardware.
Economic Feasibility: No cost is involved since frameworks and hosting
(Netlify) are free.
Operational Feasibility: The website is simple, responsive, and easy for
users to navigate.
Schedule Feasibility: Completed within the 1-month training period
due to React’s modular structure.
2.2 Analysis Methodology
The project followed an iterative approach:
Requirement gathering (features like catalog, product details, cart).
System study (analyzing sneaker websites).
Design (Use Case, ERD, DFD).
Development using React and Tailwind CSS.
Testing for responsiveness and usability.
Deployment on Netlify for public access.
2.3 Choice of Platforms
The choice of hardware and software was made to ensure reliability,
ease of development, and cost-effectiveness.
2.3.1 Software Used
• HTML5: Structure of web pages.
• CSS3: Basic styling (combined with Tailwind).
• Tailwind CSS: Utility-first CSS framework for responsive UI
design.
• JavaScript (ES6+): Interactivity and logic implementation.
• React.js: Component-based frontend framework for building the
catalog and cart simulation.
• VS Code: Development environment.
• Node.js & npm: Package manager for React project setup.
• Netlify: Hosting and deployment.
2.3.2 Hardware Used
• Processor: Intel i3 / AMD Ryzen 3 or above.
• RAM: Minimum 4 GB (8 GB recommended).
• Storage: 20 GB free disk space.
• Operating System: Windows 10 / Linux / macOS.
• Internet Connection: Stable broadband for deployment and
testing
CHAPTER 3:
SYSTEM DESIGN
3.1 Design Methodology
The project followed a component-based design approach using React.js,
combined with responsive design principles using Tailwind CSS.
• Modular Components: Navbar, Product Card, Product Details, and Cart were
developed as separate reusable components.
• Responsive UI: Tailwind CSS utility classes ensured mobile-first
responsiveness.
• State Management: React states were used to manage cart items and
product details.
• Navigation Flow: Implemented with React Router for smooth single-page
application (SPA) experience.
• Scalability: The design allows easy backend integration for authentication,
database, and payment in the future.
3.2 Database Design
Since this project was frontend-focused, no backend was implemented.
However, a database schema was conceptualized for future expansion.
Entities Identified:
• Users (Customer info for login, orders).
• Products (Sneaker details: name, size, price, image, brand).
• Cart (Items selected by customer).
• Orders (Future scope: completed purchases).
3.2.1 Entity Relationship Diagram (ERD)
• Users → Orders (1-to-many)
• Orders → Cart (1-to-many)
• Cart → Products (many-to-one)
3.2.2 Data Flow Diagram (DFD)
DFD Level 0 (Context Diagram):
• User interacts with the system (Browse → View Details → Add to Cart).
DFD Level 1:
• User Input: Search Sneakers →
• System Process: Retrieve product details from dataset →
• Output: Display product catalog and update cart.
3.3 Input Design
Inputs were kept simple and user-friendly:
• Search Bar: For searching sneakers by name/category.
• Filters (Future Scope): By size, price, or brand.
• Cart Buttons: Add/Remove sneakers from cart.
Validation Applied:
• Prevent empty searches.
• Ensure only valid sneaker IDs can be added to the cart.
3.4 Output Design
The system outputs meaningful, clear, and responsive pages:
• Home Page: Introductory sneaker banner with navigation.
• Product Catalog Page: Grid layout showing sneakers with image, price, and
add-to-cart button.
• Product Detail Page: Larger image, price, sneaker description, size options.
• Cart Page (Simulation): Shows selected sneakers with total price
calculation.
3.5 Code Design and Development
The code was designed for readability and modularity:
• Component Reusability: ProductCard component was reused in both
catalog and search results.
• Styling: Tailwind CSS classes ensured consistent spacing, typography, and
responsiveness.
• Data Handling: A dummy JSON dataset was created for sneaker products
and mapped dynamically to components.
CHAPTER 4 :
TESTING AND IMPLEMENTATION
4.1 Testing Methodology
Testing is an essential phase in software development, ensuring that
the system functions as intended under different conditions. For this
sneaker e-commerce website, testing was primarily focused on
usability, responsiveness, and correctness of functionality. Both
manual and browser-based testing were conducted across different
devices (laptop, tablet, and mobile).
Different levels of testing were applied:
• Unit Testing was performed on individual React components like
the product card, cart, and navigation bar to ensure they worked
independently.
• Module Testing validated that related modules (catalog and cart,
product detail and cart) interacted smoothly.
• Integration Testing ensured proper navigation and state
management between catalog, product detail, and cart modules.
• System Testing tested the entire application as a whole to verify
that the catalog browsing, product detail viewing, and cart
simulation worked end-to-end.
• Black Box Testing was used to verify outputs for given inputs (like
searching a sneaker name should display the relevant product).
• White Box Testing involved checking the internal React state logic
to confirm that adding and removing products updated the cart
correctly.
4.2 Test Data and Test Cases
Several test scenarios were designed to validate the website. For
example, when a user typed “Nike” into the search bar, the catalog
correctly filtered sneakers of the Nike brand. Similarly, when the “Add
to Cart” button was clicked, the product immediately appeared in the
cart with its price added to the total. Removing a product from the cart
successfully updated the cart and recalculated the total price.
The product detail page was also tested: clicking on any product card
correctly redirected the user to a dedicated page containing sneaker
information such as price, description, and size options.
Responsiveness was thoroughly tested by opening the website on
mobile devices, where the grid layout adapted seamlessly without
overlapping elements.
Through these test cases, it was confirmed that the sneaker catalog
website met its functional requirements: browsing, searching, viewing
product details, and simulating cart operations.
4.3 Test Reports and Debugging
During testing, a few issues were identified and resolved. Initially,
some sneaker images failed to load due to incorrect file paths in the
assets folder; this was fixed by correcting the directory structure. The
cart total was not updating properly when multiple sneakers were
added, which was solved by adjusting the React state logic with
useState and useEffect. Another issue was that the catalog grid
overlapped on smaller screens; Tailwind CSS responsive classes were
used to fix this. Navigation errors in the product card redirection were
also resolved by properly configuring React Router.
After debugging, all modules performed as expected, and the system
passed all functional and responsiveness tests.
4.4 Implementation
The implementation began with setting up the development
environment using Node.js and creating a React project. Tailwind CSS
was then integrated for styling. Components such as Navbar,
ProductCard, ProductDetail, and Cart were developed modularly to
allow reusability and easy maintenance. A dummy JSON dataset was
used to simulate sneaker product information.
Once development was completed, the system underwent thorough
testing and debugging. After successful validation, the website was
deployed on Netlify, making it publicly accessible at
https://sneakshop.netlify.app.
CHAPTER 5:
CONCLUSIONS AND REFERENCES
5.1 Conclusion
The project “E-Commerce Sneakers Website” successfully
demonstrates the design and development of a responsive and
interactive product catalog using HTML, CSS, Tailwind CSS, and
React.js.
The main objectives of the project — building a sneaker catalog where
users can browse products, view detailed information, and simulate
adding items to a cart — were achieved. Through modular component
design in React and utility-first styling with Tailwind CSS, the system
provides a clean, user-friendly, and mobile-first experience.
This project not only improved my technical skills in React and modern
CSS frameworks but also gave me valuable exposure to real-world
software development practices, including feasibility analysis,
structured design methodology, and testing procedures.
5.2 Limitations of the System
While the sneaker catalog is functional and responsive, there are a few
limitations:
1. No Backend Integration: The current version works only with a
static dataset (JSON). User accounts, inventory, and payments
are not implemented.
2. Cart Simulation Only: Users can add/remove items in the cart,
but checkout and order placement are not functional.
3. Limited Search/Filter Options: Advanced filters (size, color, price
range) are not yet implemented.
4. No Admin Panel: Product management (adding, editing, removing
sneakers) is not available.
5.3 Future Scope for Modification
The project has significant potential for future development. Possible
enhancements include:
1. Backend Integration: Use Node.js with MongoDB or MySQL to
store user and product data.
2. Authentication System: Allow users to sign up, log in, and manage
their orders.
3. Payment Gateway: Integration of secure payment options such as
Razorpay, Stripe, or PayPal.
4. Advanced Search & Filters: Enable filtering by brand, size, price
range, or popularity.
5. Admin Dashboard: Provide store owners with the ability to add,
update, or delete products.
6. Cloud Hosting: Deploy backend on cloud platforms like AWS or
Firebase for scalability.
These modifications would convert the project from a catalog-only
prototype into a fully functional e-commerce application.
5.4 References / Bibliography
The following references were used for development and
documentation:
1. MDN Web Docs – JavaScript, HTML, CSS
(https://developer.mozilla.org)
2. Tailwind CSS Documentation (https://tailwindcss.com/docs)
3. React.js Official Documentation (https://react.dev/)
4. W3Schools – Frontend Development Tutorials
(https://www.w3schools.com)
5. Bootstrap & Responsive Design Concepts
6. Research articles on E-commerce website design and user
experience
CHAPTER 6:
ANNEXURES
A-1 Sample Inputs
1. SignIn Page: you can sign in using their username/email and
password.
A-2 Sample Outputs
The following outputs were generated by the system:
2. Home Page: Displays banner image and navigation bar
2.Product Catalog Page: Shows sneakers in a responsive grid with
image, price, and add-to-cart button.
4.Cart Page (Simulation): Displays sneakers added by the user with
total price calculation.
