A

Mini Project Report

On

“SnapGram”
Submitted by
Rajan Kumar (Roll no. - 2208410109004)

Submitted to
Dr. Mainejer Yadav
&
Mr. L.B. Yadav

For Partial Fulfilment of Award of Degree

In
Bachelor of Technology (Department)
at

Department of Computer Science & Engineering

Rajkiya Engineering College, Sonbhadra
Affiliated to

Dr. A.P.J. Abdul Kalam Technical University, Lucknow 2024-25

 CERTIFICATE

This is hereby to certify that the original and genuine investigation work has been carried
out to investigate the subject matter and the related data collection and investigation has
been completed solely, sincerely and satisfactorily done by Rajan Kumar student of
COMPUTER SCIENCE AND ENGINNERING for the academic session 2024-2025 from
Rajkiya engineering college, Sonbhadra.

Regarding the investigatory project entitled “SNAPGRAM’.

For Project Department under direct supervision of the undersigned as per the requirement
for the Board Examination. The project report embodies the results of original work and
studies carried out by students and contents do not form the basis for the award of any other
certification courses.

DR. MAINEJER YADAV

(Assistant Prof,CSED)
&
Mr. L.B. YADAV

RAJKIYA ENGINEERING COLLEGE ,SONBHADRA

Affiliated to
DR. A.P.J. ABDUL KALAM TECHNICAL UNIVERSITY,
LUCKNOW (U.P), INDIA
 ACKNOWLEDGEMENT

We have made efforts in this project. However, it would not have been possible without the kind support and
help of many individuals. I would like to extend my sincere thanks to all of them. It has been a great honor
and privilege to complete my project work at Kamla Nehru Institute of Technology Sultanpur. We are highly
indebted to Dr. MAINEJER YADAV and Mr. L.B. YADAV for their guidance and constant supervision as
well as for providing necessary information regarding the project and for their support in completing the
project. His constant guidance and willingness to share his vast knowledge made us understand this project and
its manifestations in great depth helped us to complete the assigned tasks on time. I would like to express my
gratitude towards my parents and members of Kamala Nehru Institute of Technology Sultanpur for their kind
cooperation which help me in completion of this project. My thanks and appreciations also go to my colleagues
in developing the project and people who have willingly helped me out with their abilities.

Dr. Mainejer Yadav Dr. Amod Kumar Tiwari

(Assistant Prof ,CSED) (Head of Department,CSED)

ii
 TABLE OF CONTENT

Abstract
1

Introduction 2

Literature Survey 4

Proposed Methodology 6

Conclusion/Future scope 16

References 20

iii
 ABSTRACT
Snapgram is a unique social media platform designed to provide users with a space to connect, share, and
explore daily updates through posts without the distractions of direct communication features like video calls
or chatting. The platform focuses on fostering creativity and engagement through a visually driven interface,
where users can follow each other to build a network of like-minded individuals.

Snapgram emphasizes simplicity and authentic interactions, encouraging users to express themselves through
text, images, and stories while exploring content from others through an infinite scroll mechanism. The absence
of direct messaging tools ensures that interactions remain focused on shared content rather than private
conversations, promoting a healthier and distraction-free social media experience.

In addition to traditional posts, Snapgram incorporates features to discover trending creators and content,
rewarding originality and creativity. The platform's algorithm prioritizes user interests, enhancing content
discoverability while maintaining privacy and security.

Snapgram is ideal for users seeking a space to share moments, connect with others, and explore diverse content
without the pressure of constant communication, making it a refreshing alternative in today’s socially saturated
digital world.

1
 1. INTRODUCTION

Snapgram is a modern social media platform tailored for users who value simplicity and creativity in their digital
interactions. In a world saturated with instant messaging and video calls, Snapgram stands out by offering a space
solely dedicated to sharing moments and connecting through posts. It allows users to express themselves through
photos, text updates, and stories, focusing on creativity and meaningful engagement rather than overwhelming
communication features.

The platform is designed with a minimalist approach, enabling users to follow each other, explore diverse content,
and discover trending creators. Unlike traditional social media apps, Snapgram deliberately excludes video calls
and chatting to reduce distractions and encourage users to interact with posts thoughtfully. This unique limitation
shifts the emphasis from private conversations to shared moments, fostering a sense of community centered
around content rather than constant communication.

1.1 Core Concept

• A platform to share moments through posts (photos, text updates, and stories).
• Focus on creativity and meaningful engagement.
• Excludes video calls and chatting for a distraction-free experience.

1.2 User Interactions

• Users can follow each other to build a network.

• Interactions are centred around liking, commenting, and discovering posts.
• No private messaging ensures interactions remain public and post-focused.

1.3 Content Discovery

• Infinite scroll mechanism for seamless content exploration.

• Discover trending creators and engaging content tailored to user interests.
2
1.4 Target Audience

• Individuals are looking for a simpler, creative-driven platform.

• Ideal for users who want to avoid the pressure of constant communication.

1.5 Platform Features

• Minimalist interface for ease of use.

• Tools to post and showcase creativity.

3
 2. LITERATURE SURVEY

Social media platforms have become integral to digital communication and self-expression, offering diverse tools
for interaction. Existing platforms like Facebook, Instagram, and Twitter have evolved into all-encompassing
ecosystems with features such as messaging, video calls, and e-commerce. However, the overabundance of
communication tools often leads to distractions and information overload, creating the need for minimalist
platforms like Snapgram.

2.1 Minimalist Social Media Trend

Studies reveal a growing demand for streamlined platforms that emphasize content sharing without the
clutter of instant messaging or calls . Platforms like Verso or Ello attempted to introduce minimalist features
but struggle with user retention due to limited engagement tools.

2.2 Content-Centric Engagement

The success of platforms like Instagram highlights the importance of visually driven interfaces and content
discovery . Snapgram incorporates these features and allows users to share pictures , save posts , follow the
other users and add captions for specific posts.

2.3 Privacy and Mental Well-being

Like other social media platforms that make audience addicted , it helps to only engage in sharing posts and
not engaging in private conservation and help in reducing unnecessary fatigue in this digital world .

2.4 Conclusion

Studies reveal a growing demand for streamlined platforms that emphasize content sharing without the
clutter of instant messaging or calls . Platforms like Verso or Ello attempted to introduce minimalist features
but struggle with user retention due to limited engagement tools.

4
2.5 Usability Testing

• Select a diverse group of users (new users, experienced creators, etc.).

• Observe how they navigate Snapgram and interact with features...

2.6 Security Features

Implementing security protocols to protect against vulnerabilities and ensuring secure handling.
data.

5
 3. PROPOSED METHADOLOGY

This section describes the software and hardware requirements of the system :

3.1 Software Requirements

• Operating system- Windows 10 is used as the operating system as it is stable and supports more
features and is more user friendly.
• Development tools and Programming language- JavaScript is used to write the whole code and
develop webpages with CSS, java script for styling work . also use Appwrite and REST API to
enable authentication and for backend functionalities.

3.2 Hardware Requirements

• Intel core i5 2nd generation is used as a processor because it is faster than other processors and
provide reliable and stable and we can run our pc for long time. By using this processor, we can
keep on developing our project without any worries.
• Ram 3 GB is used as it provides fast reading and writing capabilities and will in turn support
processing.

3.3 Existing System

• Addictive social media platforms.

• Increasing unwanted fatigue using these social media platforms.
• Unwanted requests and danger of social breach.
• Illegal frauds from unknown people .
• Can not predict the people’s real orientations.
• Misleading people through the process .
• Pictures were used by any of the anonymous people.
• Not suitable for all age groups, it can disturb your day-to-day life
• Several threats can also disturb daily activities.

6
3.4 Proposed Systems
To solve the inconveniences as mentioned in the existing system, a delivery system is proposed. The
proposed system contains the following features:

3.4.1 Signup
• Visually appealing signup page.
• Easy options for signup .

3.4.2 Sign In
• Users can sign in after the signup page.
• Users can sign in with email and password.
• Real-time availability and easy login and signup option.

3.4.3 Home Screen

• User-friendly registration after login page .

• Personalized user profiles to save posts.
• Users can get the top creators and save post options.

3.4.4 Post Screen

• Users can select pictures and can add features .
• Features can be caption , location and descriptions.
• Users can also see the top creators .

7
 3.5 Software Tools Used

The whole Project is divided in one part the front end for the given page :

3.5.1 Front end

The front end is designed using React JS , Tailwind CSS and ShadCN UI .
1.React JS

React.js is a popular open-source JavaScript library for building user interfaces, primarily for single-page
applications. Developed by Facebook, it enables developers to create reusable UI components, making code
more maintainable and efficient. React uses a declarative approach, meaning developers describe what the UI
should look like for a given state, and React ensures the DOM reflects that state.

Reacts’ core feature is its component-based architecture, which allows developers to build encapsulated
components that manage their own state and logic. Components can be class-based or functional, with the latter
gaining popularity due to hooks, like using State and Effect, which enable state management and lifecycle
methods within functional components.

The Virtual DOM is another key feature of React. It efficiently updates the real DOM by calculating and
applying only the necessary changes, improving performance. React also supports unidirectional data flow,
ensuring predictable state management and easier debugging.

React integrates well with other libraries or frameworks and can be used to develop both web and mobile
applications (via React Native). Its extensive ecosystem includes tools like React Router for navigation and
Redux or Context API for state management. React flexibility, simplicity, and performance make it a top choice.

2.Shadcn
8
ShadCN UI is a developer-friendly library for building modern, accessible, and customizable user interfaces in
React applications. It combines the utility-first approach of Tailwind CSS with pre-designed, accessible
components, allowing developers to craft responsive and elegant interfaces quickly. The library emphasizes
simplicity, modularity, and ease of customization, making it ideal for projects requiring high design flexibility
without sacrificing accessibility or performance.

Key features include a variety of reusable components such as buttons, modals, forms, and more, each designed
to work seamlessly with Tailwind's class-based styling. ShadCN UI leverages Radix UI for enhanced
accessibility and logic, ensuring compliance with modern web accessibility standards.

The library provides framework-agnostic templates, allowing integration with popular tools and workflows
while leaving room for developers to extend or modify components as needed. ShadCN UI's emphasis on
maintaining a clean, minimal footprint ensures efficient performance.

ShadCN UI is well-documented, offering guides for installation, setup, and component customization. Its
integration with modern development tools and clear design philosophy makes it a go-to choice for developers
aiming to create polished, scalable UIs in React.

3.Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows developers to create custom, responsive designs
quickly and efficiently. Unlike traditional CSS frameworks that provide pre-styled components, Tailwind
focuses on providing low-level utility classes for controlling layout, spacing, typography, colors, and more. This
approach enables developers to build unique designs without writing custom CSS or overriding pre-existing
styles.

With Tailwind, you can apply utility classes directly to HTML elements, which streamlines the development
process and reduces the need for complex CSS files. It also offers features like responsive design, customization
through configuration files, and a powerful plugin system for extending functionality.

9
4. Appwrite

Appwrite is an open-source backend-as-a-service (BaaS) platform designed for building modern web and
mobile applications. It simplifies the process of managing app functionalities such as user authentication,
database management, file storage, and real-time communication. Appwrite provides a set of REST APIs and
SDKs for popular programming languages and frameworks, enabling developers to integrate powerful backend
features with minimal effort.
Appwrite core features include secure user authentication, role-based access control, and built-in support for
managing databases and file storage. It also offers real-time data synchronization, making it easy to develop
collaborative or dynamic applications. The platform supports a variety of databases, such as NoSQL and SQL,
and provides tools for data querying and indexing.
Appwrite is designed to be self-hosted, allowing developers to have full control over their backend
infrastructure. With comprehensive documentation and a developer-friendly interface, Appwrite is popular
among developers looking for a robust yet customizable backend solution.

5. REST API

A REST API (Representational State Transfer Application Programming Interface) is a set of web services that
allows communication between different software systems over HTTP. It follows the principles of REST
architecture, focusing on stateless interactions, where each request from the client to the server must contain all
necessary information. REST APIs use standard HTTP methods like GET, POST, PUT, and DELETE to
perform operations on resources, which are typically represented as URLs. Data is often exchanged in formats
like JSON or XML. REST APIs are widely used for their simplicity, scalability, and flexibility .

10
3.6 Software Tools Used

3.6.1 Data Flow Diagram

After entering to the login page user can post the desire pictures and also user can interact with other
and see what other can post also provide the post and save the post that user like .

11
3.6.2 Use Case Diagram for User

12
3.7 Screenshots

3.7.1 login page

Chapter 3 Sign Up Page : 1.(a)

Chapter 3 Login Page : 1.(b)

13
3.7.2 Home Screen

Chapter 3 Login Page : 2.(a)

14
 Chapter 3 Profile and Creator Tab : 2(b)

3.7.3 Appwrite Display

15
 Chapter 3 Authentication : 3(a)

Chapter 3 Storage : 3(b)

4.CONCLUSION/FUTURE SCOPE
16
4.1 Future Scope
Snapgram Handle has immense potential to evolve into a leading social media platform, offering innovative
ways for users to share content, engage, and build communities. To enhance user engagement and provide a
more immersive experience, the following features can be integrated into the platform's roadmap:

Chat Feature:
A real-time chat feature will allow users to connect seamlessly with their followers, friends, or collaborators. This
functionality can include text messaging, media sharing, and reaction options. Group chats can also be introduced to foster
community discussions and project collaborations. Integrating AI-powered chatbots for customer service and support could
further improve the user’s experience.

Calling Feature:
Adding voice and video calling capabilities will elevate Snapgram Handle into a multi-functional platform. This
will enable users to interact more personally, host live discussions, or even conduct online interviews. Features
like screen sharing and group video calls can also open avenues for virtual events or educational sessions.

AI-Driven Personalization:
Implementing AI-based algorithms can provide personalized content recommendations, improving user
retention and satisfaction. AI can also be used to moderate content, ensuring a safe and inclusive environment.

Monetization Opportunities:
Snapgram Handle can include creator monetization tools such as in-app purchases, ad revenue sharing, and
premium subscriptions. Features like tipping or paid access to exclusive content can help creators earn directly
from their audience.

Enhanced Exploration and Analytics:

Expanding the explore section with advanced filters and tags will enable users to discover diverse content.
Offering creators detailed analytics about their performance and audience demographics can aid in content
strategy development.

4.2 Conclusion
17
Snapgram Handle is uniquely positioned to become a game-changer in the social media landscape by
combining creativity, community building, and advanced communication tools. By adding features like real-
time chat and calling, it will not only enhance user interaction but also expand the platform’s usability for
professional and casual purposes. With continuous innovation and user-centric updates, Snapgram Handle can
establish itself as a one-stop platform for creators and consumers alike. The future is bright for Snapgram
Handle as it grows into a dynamic, versatile, and inclusive ecosystem.

18
 References
1. MDN Web Docs: https://developer.mozilla.org/
2. W3Schools: https://www.w3schools.com/
3. CSS-Tricks: https://css-tricks.com/
4. Smashing Magazine: https://www.smashingmagazine.com/
5. A List Apart: https://alistapart.com/
6. Stack Overflow: https://stackoverflow.com/
7. CodePen: https://codepen.io/
8. GitHub: https://github.com/
9. Frontend Masters: https://frontendmasters.com/
10. CSS Grid Garden: https://cssgridgarden.com/
11. Flexbox Froggy: https://flexboxfroggy.com/
12. Google Developers Web Fundamentals: https://developers.google.com/web/fundamentals
13. Web.dev by Google: https://web.dev/
14. FreeCodeCamp: https://www.freecodecamp.org/
15. Responsive Design Patterns: https://bradfrost.github.io/this-is-responsive/patterns.html

19
 CHAPTER-4
CONCLUSION/FUTURE SCOPE

Blossoms and Petals, with its enchanting front-end website, epitomizes a digital floral haven that transcends
the conventional boundaries of online shopping. The meticulously crafted interface seamlessly intertwines
aesthetics with functionality, mirroring the beauty of the floral arrangements it showcases. The website is a
testament to user-centric design, offering an immersive experience that effortlessly guides visitors through
vibrant tapestry of blooms.

The homepage welcomes users with a symphony of colors, gently guiding them to explore diverse categories
and arrangements. The intuitive navigation ensures a delightful journey, allowing customers to effortlessly
find the perfect floral expression for any occasion. Each click unfolds a visual feast, with high- resolution
images capturing the essence of each bouquet, from the delicate petals to the vibrant hues.

The checkout process is a breeze, embodying simplicity without compromising on security. A user-friendly
interface seamlessly integrates payment options and delivery details, ensuring a stress-free and secure
transaction. Responsive design enhances accessibility, allowing users to engage seamlessly across various
devices, fostering a dynamic and inclusive user experience.

The interactive features, such as personalized recommendations and real-time order tracking, add a
personalized touch, transforming a mere transaction into a memorable journey. Social media integration
further amplifies the sense of community, encouraging customers to share their moments of floral bliss.

In conclusion, the Blossoms and Petals frontend website is a captivating symphony of design and
functionality, redefining the online floral shopping experience. With its user-centric approach, seamless
navigation, and visually enticing interface, it not only simplifies the process of purchasing flowers but
elevates it into an artful and memorable affair. Blossoms and Petals sets a new standard for online floristry,
where every click is a step into a world of blooming enchantment.

20
 REFERENCES

16. MDN Web Docs: https://developer.mozilla.org/

17. W3Schools: https://www.w3schools.com/
18. CSS-Tricks: https://css-tricks.com/
19. Smashing Magazine: https://www.smashingmagazine.com/
20. A List Apart: https://alistapart.com/
21. Stack Overflow: https://stackoverflow.com/
22. CodePen: https://codepen.io/
23. GitHub: https://github.com/
24. Frontend Masters: https://frontendmasters.com/
25. CSS Grid Garden: https://cssgridgarden.com/
26. Flexbox Froggy: https://flexboxfroggy.com/
27. Google Developers Web Fundamentals: https://developers.google.com/web/fundamentals
28. Web.dev by Google: https://web.dev/
29. FreeCodeCamp: https://www.freecodecamp.org/
30. Responsive Design Patterns: https://bradfrost.github.io/this-is-responsive/patterns.html

21
22