B.
Back to projects

Next Insider

A fullstack social media application built with Next.js, TypeScript, and React, designed to connect people, rant and share insights.

5 min read
By Benjo Quilario
Next.js
TypeScript
React
Web Development
Social Media
Fullstack

LiveUrl: https://next-insider-7c4y.vercel.app/.

GitHub: https://github.com/benjoquilario/next-insider

The first version repo way back in 2022: https://github.com/benjoquilario/insider ⛔️ DEPRECATED

This application is memorable for me because it was my first fullstack application that I built. I created the first version of this application way back in 2022 while I was still learning and experimenting with different technologies. Initially, it was built with the MERN stack (MongoDB, Express.js, React, and Node.js), but I later decided to rebuild it using Next.js and TypeScript to take advantage of their powerful features and improve the overall developer experience.

Next Insider Home

History

Back in 2022, I was thrilled to have built my first fullstack application and eagerly shared it with my friends. They, in turn, shared it with others, but things quickly went wrong. The application was hit by DDoS attacks and spam, causing it to crash. People posted inappropriate content and offensive language, and I didn’t know how to handle the situation. After just three days, I decided to shut down the application.

That experience taught me a lot, especially about the importance of security, rate limiting, and scalability in web applications. I realized I needed to implement stronger security measures and optimize the application to handle higher traffic.

Lessons learned

  • Security: I learned the hard way about the importance of securing user input and preventing malicious attacks. This experience taught me to implement proper validation, sanitization, rate limiting, and security measures in my applications.
  • Scalability: I realized that building a scalable application requires careful planning and architecture. I needed to consider how to handle increased traffic and user interactions without compromising performance.
Next Insider Info

Features

  • User Authentication: Users can create accounts, log in, and manage their profiles securely.
  • Post Creation and Management: Users can create, edit, and delete their posts, as well as interact with other users' posts through comments and likes.
  • Commenting System: Users can comment on posts, allowing for discussions and interactions within the community.
  • Reply to Comments: Users can reply to comments, creating a threaded discussion format that enhances engagement.
  • Like and Dislike System: Users can express their opinions on posts by liking or disliking them, helping to surface popular content.
  • Image Uploads: Users can upload images to their posts, enhancing the visual appeal of their content.
  • User Following: Users can follow other users to see their posts in their feed, creating a personalized experience.
  • User Feed: A dynamic feed that displays posts from followed users, allowing users to stay updated with the latest content from their connections.
  • Notifications: Users receive notifications (Not Real time) for important events, such as new comments on their posts or replies to their comments.
  • Responsive Design: The application is designed to be fully responsive, providing an optimal experience on both desktop and mobile devices.
  • Search Functionality: Users can search for posts and users, making it easy to find relevant content.
  • Advanced Search Filters: Filter name, age, and other criteria to find exactly what you're looking for.
  • Dark Mode: Users can switch between light and dark themes for a personalized viewing experience.
  • User Profiles: Each user has a profile page displaying their posts, comments, and other relevant information.
  • Dark Mode: Users can switch between light and dark themes for a personalized viewing experience.
Next Insider Discover

Technologies Used

  • Next.js: A powerful React framework for building server-rendered applications.
  • TypeScript: A statically typed superset of JavaScript that enhances code quality
  • React: A JavaScript library for building user interfaces, enabling a component-based architecture.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • Prisma: An ORM (Object-Relational Mapping) tool for TypeScript and Node.js, simplifying database interactions.
  • PostgreSQL: A powerful, open-source relational database for storing application data.
  • NextAuth.js: A complete open-source authentication solution for Next.js applications.
  • Zod: A TypeScript-first schema declaration and validation library, ensuring data integrity.
  • React Hook Form: A library for managing form state and validation in React applications.
  • React Icons: A library providing a wide range of icons for use in React applications.
  • Uploadthing: A file upload library for handling image uploads in the application.
Next Insider Post

Future Plans

  • Real-time Features: Implement real-time updates for notifications and comments to enhance user engagement.
  • Improved Security: Continue to enhance security measures to protect against potential threats and ensure user data privacy.
  • Performance Optimization: Continuously optimize the application for better performance and scalability
  • Mobile App: Consider developing a mobile app version of Next Insider to reach a wider audience and provide a better user experience on mobile devices.

Conclusion

Next Insider is a powerful platform for discovering and sharing content within the Next.js community. With its robust feature set and modern technology stack, it provides an excellent user experience for both content creators and consumers. As the project continues to evolve, there are many exciting opportunities for growth and improvement.