FriendBay-Social-Media-Site

FriendBay Social Media Site

A modern social media platform built with Next.js, React, and TypeScript.

Features

• Modern UI with Tailwind CSS
• Type-safe development with TypeScript
• Server-side rendering with Next.js
• Responsive design
• Local storage for data persistence

Getting Started

1. Clone the repository
2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

4. Open http://localhost:3000 in your browser

Tech Stack

• Next.js 14
• React 18
• TypeScript
• Tailwind CSS
• PostCSS
• Autoprefixer

Project Structure

src/
  ├── components/     # Reusable React components
  ├── pages/         # Next.js pages
  ├── styles/        # Global styles
  └── types/         # TypeScript type definitions

Development

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

License

ISC

Project Scope & Functionality

• Create, edit, and delete posts
• React to posts with like, love, and laugh reactions
• Search posts by username or content
• User profiles with avatars
• Responsive, accessible UI using Tailwind CSS
• Persistent state using localStorage (and MongoDB for backend)
• Unit tested with React Testing Library and Jest

Technologies Used

• Next.js (React framework)
• React
• Tailwind CSS
• MongoDB (optional, for backend persistence)
• Jest & React Testing Library (for unit testing)

Accessibility & UX

• Semantic HTML and ARIA roles
• Keyboard navigation and skip links
• Responsive design for all devices
• High-contrast, visually appealing UI

Deployment

• The app can be deployed to Vercel, Netlify, or GitHub Pages (static export)
• Ensure environment variables are set for MongoDB if using backend

Author

Sam Connor (colaone1)

---

For more information or to contribute, please open an issue or pull request on GitHub.