Webscape Challenge (Beginner)

Welcome to the DevConnect social media website challenge! This project aims to create a simple yet functional social media interface that allows users to view and create posts, manage their profile, and interact with other users. Your goal is to build an engaging user experience using vanilla JavaScript, HTML, and CSS.

User Story

As a social media user, I want to interact with a simple platform where I can view posts from other users and create my own posts, so that I can participate in a developer-focused social community.

Key Expectations

• Refined User Experience: Enhance the existing page to have all necessary functionalities and to be more appealing
• Main Feed: A central area showing posts from users with interaction capabilities
• Profile Section: User profile display with statistics and information

Suggested Things to be Improved

1. Additional Pages

• Create a dedicated Profile page
• Implement a "For You" page with personalized content
• Add more pages based on your creative vision

2. Enhanced Post Functionality

• Enable photo uploads and display
• Add video posting capabilities
• Implement media preview features

3. Main Feed

Purpose: Display and manage posts from users.

Incomplete Elements:

• Post Creation:

  • Textarea for new post content
  • Post button with incomplete styling
  • Missing interaction feedback
  • Media upload functionality

• Post Display:

  • Post cards showing author, timestamp, and content
  • Incomplete like and comment functionality
  • Missing hover states and transitions

4. Profile Section

Purpose: Show user information and statistics.

Incomplete Elements:

• Profile Card:
  • Cover photo and avatar placeholders
  • Statistics display (posts, friends, followers)
  • Incomplete responsive design
  • Missing hover effects

5. Responsive Design

• Implement mobile-first approach
• Create responsive layouts for all pages
• Ensure proper display across all device sizes

6. Home Page Enhancement

• Improve overall visual design
• Add engaging animations and transitions
• Implement better user interaction feedback
• Enhance the overall user experience

Creative Freedom

Feel free to modify and enhance any section of the website, including the navbar and friends list. Use your creativity to make the project stand out by:

• Implementing unique features
• Creating an original design theme
• Adding innovative interaction patterns
• Developing distinctive functionality

Getting Started

Follow these instructions to set up the project locally.

Prerequisites

• Any modern web browser
• Code editor

Installation

Clone the repository:

git clone https://github.com/CSI-MIT-WPU/evolve-webscape-beginner.git
cd evolve-webscape-beginner

Install dependencies:

npm install

Run the development server:

npm run dev