Petagram - Social Media App

Connect, Share, and Engage

A full-featured social media platform with posts, comments, reactions, and user following.

  • Vanilla JavaScript
  • Tailwind CSS
  • Vite (MPA)
  • Noroff Social API
  • Unit Testing
  • CRUD Operations
  • Netlify (Deployment)
    • Petagram social media platform showing the feed and user interface
    Petagram feed page showing posts, search functionality, and create post form

    My Role in the Project

    Petagram was developed as a JavaScript 2 course assignment, focusing on advanced JavaScript concepts and social media functionality. Working with a partner, I was responsible for:

    • Frontend Development: Built the complete social media interface using Vanilla JavaScript and Tailwind CSS, implementing all required pages and functionality.
    • API Integration: Connected the application to the Noroff Social API for user authentication, post management, and social interactions.
    • CRUD Operations: Implemented full Create, Read, Update, and Delete functionality for user posts with proper error handling and validation.
    • Social Features: Developed following/unfollowing system, commenting functionality, and emoji reactions for posts.
    • Testing: Worked with unit tests to ensure code quality and functionality, using the provided test suite for development feedback.
    • Responsive Design: Utilized Tailwind CSS to create a mobile-first, responsive design that works across all devices.

    This collaborative project enhanced my skills in advanced JavaScript, API integration, and working with CSS frameworks.

    Technical Challenges

    • Advanced JavaScript Logic: Implementing complex social media functionality using only Vanilla JavaScript without frameworks like React or Vue.

    • Multi-page Application (MPA): Managing state and navigation across multiple HTML pages while maintaining user experience and data consistency.

    • API State Management: Handling user authentication, post data, and social interactions across different pages without a centralized state management system.

    • Tailwind CSS Learning Curve: First time using Tailwind CSS utility classes, learning to build responsive layouts with utility-first approach.

    • Collaborative Development: Working with a partner on the same codebase, managing git workflows, and coordinating feature development.

    • Unit Testing Integration: Understanding and working with the provided test suite to ensure code quality and functionality.

    Petagram user profile page showing user posts and follow functionality

    Features

    User Authentication: Secure login and registration system with form validation and session management across the application.

    Post Management: Create, edit, and delete posts with image uploads, descriptions, and proper CRUD operations.

    Social Interactions: Follow/unfollow users, comment on posts, and react with emoji responses for full social engagement.

    Feed & Search: Dynamic feed with search functionality, sorting options, and real-time post updates.

    Profile Management: Customizable user profiles with profile images, post history, and follower/following displays.

    Responsive Design: Mobile-first design using Tailwind CSS that adapts seamlessly across all device sizes.

    What I Learned

    • Advanced JavaScript: Deepened understanding of JavaScript fundamentals, DOM manipulation, and asynchronous programming without framework dependencies.

    • Tailwind CSS Mastery: Learned utility-first CSS approach, responsive design patterns, and efficient styling workflows.

    • API Integration: Gained experience with complex API operations including authentication, CRUD operations, and social media functionality.

    • Collaborative Development: Improved skills in git workflows, code reviews, and coordinating development tasks with a partner.

    • Testing Practices: Learned to work with unit tests and use testing feedback to improve code quality and functionality.

    • Vite Build Tool: Gained experience with modern build tools and multi-page application configuration.

    Petagram login and registration forms with validation
    Petagram mobile responsive design showing the app on different screen sizes

    Future Improvements

    • Real-time Updates: Implement WebSocket connections for live post updates, comments, and notifications without page refreshes.

    • Enhanced Media Support: Add support for video uploads, multiple image galleries, and media optimization.

    • Advanced Social Features: Implement direct messaging, story features, and group functionality for enhanced user engagement.

    • Performance Optimization: Add lazy loading, infinite scroll, and caching strategies for better performance with large datasets.

    This project provided excellent experience in building complex social media functionality with modern web technologies.

    Explore Petagram

    View Live Github mark logo in black

    Experience the social media platform or explore the Vanilla JavaScript and Tailwind CSS implementation on GitHub.