Noutes (Final Product)

October 22, 2024 – November 19, 2024

Posted on August 4, 2025Updated about 1 year ago

Completed

Noutes is a full-stack social platform I built with a focus on real-time interaction, user expression, and seamless UX. The app features secure email authentication with full support for verification, password reset, and account recovery. Users can personalize their profiles by updating their name, username, email, bio, birthdate, and password. Each profile includes rich social features such as following, friending, and profile browsing. At the core of the platform are Noutes—customizable post-like entries that support images and styled text via HTML parsing. Each Noute supports descriptions, liking, saving, and visibility across user feeds. The Explore page allows users to search both profiles and Noutes, while highlighting the most viewed and most liked content. Both the home feed and Explore feed implement infinite scrolling powered by TanStack Query for smooth, efficient data loading. To support real-time communication, I integrated Socket.IO for instant messaging between friends. Combined with thoughtful UI/UX, scalable architecture, and robust authentication, Noutes delivers a dynamic and personalized social experience. I also made this app a Progressive Web App (PWA), allowing it to run full screen and provide users with a more immersive experience.

https://noutes.vercel.app/https://github.com/cchryx/Noutes

Project Author

Chris Chen

@cchryx

Computer Science student at the University of Toronto, St. George Campus, Class of 2030. Passionate about coding, building engineering projects, and exploring how technology can create impactful solutions. Skilled in application design, software development, and experimenting with emerging tools to bring ideas to life. Outside the classroom, I enjoy skateboarding, playing guitar, and creating visual art—pursuits that inspire creative problem-solving and innovative thinking. I thrive in collaborative environments, love sharing knowledge, and am always seeking opportunities to merge technology, design, and user experience to deliver meaningful, user-focused projects that make a difference.

21 Followers

11 Projects

Chris Chen

@cchryx

21 Followers

11 Projects

Project Skills (8)

React.js

MongoDB

Socket.io

Node.js

Next.js

TypeScript

Progressive Web Applications (PWAs)

Tailwind CSS

Project Contributors (1)

Noutes

@noutes

Project Gallery (11)

This is the home infinite scroll feed, displaying all Noutes posted by users the person follows.

This is the mobile layout, displaying a Noute’s profile in a clean and responsive format.

In Settings, users can update their avatar, name, bio, gender, and location—each with cooldowns in place to prevent spamming.

Noute details with the title, description and tags.

A Noute card can be shared via link with anyone, displaying its images, text content, title, description, and tags. Users can also like and save it.

Creating a noute by uploading an image to Cloudinary and cropper tool to resize and crop.

The inbox displays incoming and pending friend requests, allowing users to view ongoing requests and accept new ones.

This section displays all contacts or friends, with a search feature that lets users quickly find and message them.

This is a direct message chat channel where users can have real-time conversations with their friends.

This is the library, showing both the user’s posted Noutes and the Noutes they’ve saved.

In this section of Settings, users can update their email, birthdate, phone number, and password.

Project Resources (8)

https://nextjs.org/https://vercel.com/https://tailwindcss.com/https://www.postman.com/https://www.mongodb.com/https://tanstack.com/https://zod.dev/https://socket.io/