Skip to content

nss-evening-cohort-20/Mooch-Lightning

Repository files navigation

Mooch

Mooch-gif-1

Mooch is an application that allows users to share their different subscription services and 'mooch' on memberships from their close friends!

This project was created as a Full Stack Group Project while attending Nashville Software School's Full Stack Web Development Bootcamp. All planning and development was completed over the course of 4 weeks.

Contributors:

Table of Contents

Project Description

Many of us subscribe to a host of different services. Woudn't it be nice to share a subscription with a friend when you don't need it? Like if you're travelling outside the country, you probably aren't going to be using that YMCA service that much!

Mooch solves this problem by allowing users to browse and search for membership subscriptions that other users are willing to share. Users can manage their memberships, create new Mooch Posts when they want to share a membership for a specific time, and manage incoming Mooch Requests on their posted mooches to decide who they want to share that mooch with!

ScreenShots/Gifs

Homepage

Mooch-gif-2

Interactive homepage with collapsing sections


Realtime Searching by Organization, Membership, or Username

Mooch-gif-3

Realtime search feedback as you type


Organization Details, Mooch Details with Suggestions

Mooch-gif-4

Suggestions for mooches, all in one effecient backend request


Request a Mooch

Mooch-gif-5

Requesting another users Mooch Post


Add a Membership, post a Mooch

Mooch-gif-6

Add a membership to your account from the list, then post a Mooch yourself!


Technologies Used

React JS React Router JavaScript ReactStrap npm Firebase C# .NET SQL Server Swagger

Challenges Faced

One Specific difficulty Jeremy faced was getting the Authentication and Authorization flow to work properly and manage the JWT correctly to protect the endpoints. It took some googling to understand where and how in program.cs to setup the JWTBearer and how to handle that in the frontend as well. He was eventually able to accomplish this, but as the team was primarily using swagger rather than postman for API testing, constantly reauthenticating the JWT during endpoint testing slowed development significantly. The JWT Authorization was removed from the endpoints. Incorporating Postman earlier into the process and setting the JWT as an environment variable in postman would've allowed the endpoint jwt to stay in place and would've probably singificantly improved development velocity in general.

Lessons Learned

Working Vertically Can Minimize Wasted Effort When on a Deadline

For this project, we primarily worked in horizontal slices:

  • Planning/basic prototyping with Figma (Link to Wireframe here)
  • Creating an ERD to understand the data relationships we were going to be managing (link to ERD here)
  • Creating Backend issues in Github Project Board
  • Completing the majority of Backend Issues before moving to frontend
  • Creating Frontend Issues in Github Project Board
  • Completing Frontend Issues

While this approach did allow us to stay relatively focused, it became evident as the project went on that we had spent a lot of time on backend CRUD that we weren't even going to be able to incorporate in the frontend due to time constraints. Had we worked more vertically, we could've ensured that upon each merge to main, that merge included a complete, vertical (frontend to backend) set of value to the user.

Current Features

  • Users must login and create an account to use Mooch
  • On the homepage, Users can search Mooches by Membership, Organization, or User
  • Users can view details about an organization
  • Users can view Mooch details, see other suggested Mooches by that user, and see other Mooches in that category
  • Users can request a Mooch
  • Users can add a membership to their account
  • Users can view their memberships, Mooches, and Mooch Requests

Possible Future Features

  • Search for mooches based on Location
  • Ability to see more information (username, etc) when reviewing mooch requests
  • Ability to edit or delete a Mooch Post
  • Ability to accept, or deny a Mooch request
  • Start a conversation thread with a requestor when a Mooch is requested

How to Install and Run

Dependencies You will need npm, Visual Studio, .NET 6, SQL Server, and whatever SQL Client you prefer (We used SQL Server Management Studio)

  1. git clone this repo to your local machine.
  2. Setup Firebase project for authentication. For step-by-step instructions for this process, check out this file here.
  3. Navigate to the repo on your machine and run the following commands in the terminal:
cd mooch-client
cp .sample.env .env.local

  1. Update the .env.local file with the Firebase API keys created in the previous step.
  2. Make sure that Node.js and npm are installed on your machine. Click here for installation.
  3. Run the following command in the terminal from the mooch-client directory:
npm install
  1. Open your SQL Server and copy/paste the SQL script located in Mooch-Lightning/Data Directory
  2. Paste the script into your SQL client and run. This will create the database and schema, and create some seed data as well

9.In Visual Studio, open the Mooch-Lighting.sln 10. Right click on the Dependencies folder and select Reload 11. Right click on theMooch-Lightning project in the Solution Explorer and select Manage User Secrets 12. Fill in the following JSON data, including the location of your database server and the firebase config data.

{
  "ConnectionStrings": {
    "DefaultConnection": "server=<YourLocalSQLServerDatabaseConnection>;integrated security=true;Trust Server Certificate=true"
  },
  "FirebaseProjectId": "mooch-lightning",
  "FirebaseConfig": {
    "apiKey": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    "authDomain": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    "projectId": "XXXXXXXXXX",
    "storageBucket": "XXXXXXXXXX",
    "messagingSenderId": "XXXXXXXXXX",
    "appId": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  }
}
  1. Run the Backend from Visual Studio

  2. Run the Frontend by navigating to the mooch-client folder and running npm start

  3. The frontend should start on http://localhost:3000/

  4. Enjoy the App!

Credits

We want to thank everyone in our NSS Cohort that helped us out with this project. The instructors gave meaningful insight into what would be best to focus on in this application.

Links

Project ERD || Wireframe