PixDrops

PixDrops is a fullstack social media web application, built using the MERN stack (MongoDB, Express.js, React, Node.js). This README provides an overview of the app's features, setup instructions, usage guidelines, and a video walkthrough of the app.

Table of Contents

• Features
• Technologies Used
• Getting Started
• Prerequisites
• Running the Application
• Usage
• Video Walkthrough
• Contributing
• License

Features

• User Registration/ Profile Creation: Users can create an account by providing a unique username, email, password, personal information and a profile picture.
• User Login: Registered users can log in to their account using their username and password.
• Post Pictures: Users can upload and share pictures on their profile and feed.
• Add/Remove Friends: Users can add/remove friends by clicking the add/remove icon next to the users.
• Feed: Users can view a feed of pictures posted by their friends.
• View Profile: Users can click on their widget to see the profile info.

Technologies Used

• Frontend
  • Material UI
  • Redux Toolkit
  • React Router
  • Redux Persist
  • React Dropzone
  • Google Fonts
  • Formik
  • Yup
  • VSCode
• Backend
  • Node.js
  • Nodemon
  • Dotenv
  • MongoDB
  • Mongoose
  • JsonWebToken
  • Multer
  • GridFS-Storage
  • Postman

Getting Started

Prerequisites

Make sure you have the following installed on your system:

• Node.js
• npm
• MongoDB Atlas account and cluster

Running the Application

1. Clone the repository

   git clone https://github.com/FayeAlangi/PixDrops.git

2. Navigate to the project directory

   cd PixDrops

3. Install server dependencies

   cd server
   npm install

4. Install client dependencies

   cd ../client
   npm install

5. Set up environment variables

   • Create a .env file in the backend directory with the following contents:

   MONGO_URL=your_mongodb_uri
   PORT = 3001
   JWT_SECRET=<your secret token>

6. Start the development server

   cd ../server
   npm start

7. Start the application

   cd ../client
   npm start

Usage

1. Frontend: http://localhost:3000
2. Backend API: http://localhost:30001

Video Walkthrough

Here's a walkthrough of implemented user stories:

GIF created with LICEcap.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a pull request

License

Copyright 2024 Faye Alangi

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.