Serene Marine - Beach Clean Up

1. Summary
   1. Key Notes
   2. Tech Stack
   3. Login Details for Admin
2. Getting Started
   1. Requirements
   2. Steps
   3. Issues & Solutions

Summary

Final year University project aiming to increase the participation of beach clean up events by providing an easy-to-use platform for people to find and join events. Provides additional features such as Petitions, Threads and Donation channels.

Key Notes

• Project has been configured and updated to run locally.
• Database has been setup to use MongoDB, make sure check your connection string.
• When running the project for the first time, it will create the database and load default data.
• MapBox GL JS has been integrated for marking and setting locations for events.
• Admins can CRUD Events, Petitions and Threads.
• Users can participate in Events, Petitions and Threads.
• Anonymous users can join events using their email address.
• HTML & CSS has not been optimized for mobile devices.

Tech Stack

1. ASP.NET core WebApi (API)
2. ASP.NET Core WebApp MVC (front-end & back-end)
3. MongoDB (database)

Login Details for Admin

Email	Password
admin@serenemarine.com	123456

Getting Started

Requirements

• Visual Studio
• Asp.Net
• IIS Express
• Internet Browser (Google Chrome)
• MongoDB Atlas or On-premise MongoDB Locally (Instructions at Steps 2. Setup MongoDB)

Steps

1. Visual Studio

1. Clone or Fork the repo.
2. In the folder, double-click the .sln file to open the solution.
3. Set the Solution to startup using Multiple Projects:
   1. In the Solution Explorer, Right-click the 'Solution SereneMarine' and select 'Properties'
   2. In the left-menu tab under 'Common Properties' select 'Startup Project'
   3. Choose 'Multiple startup projects' radio checkbox option.
   4. Set both projects to Action -> Start. Make sure WebApi starts before the website.
   5. Make Sure WebApi is above SereneMarine_Web.
4. Clean and Rebuild the entire Solution.

2. Setup Your MongoDB

2.1 MongoDB Atlas (Cloud Version, easiest option and less setup)

1. Create an organization
2. Create a Project
3. Create a Free Shared Cluster
4. Add your connection IP Address to IP Access List
5. Create a Database User for Your Cluster

2.2 On-premise MongoDB (local version, requires setup)

1. Download MongoDB Community Server
2. Run the MongoDB installer
3. Follow the MongoDB Community Edition installation wizard and uncheck 'Install MongoD as a Service'.
4. Make sure the mongo database server is running
   1. Locate your MongoDB Server install and double-click the 'mongod.exe' file. This is usually located in
      1. 'C:\Program Files\MongoDB\Server<version>\bin\mongod.exe'

3. Update Database Connection String

1. In Solution Explorer, drop-down the WebAPI project and double-click the 'appsettings.json' file.
2. Under 'UserDatabaseSettings', replace the field value for 'ConnectionString' with your connection string.
   1. MongoDB Atlas (cloud)
      1. In your Database Deployments View, click the 'Connect' button for the cluster you created.
      2. Select 'Connect your application'
      3. For Driver, select C# /.NET
      4. For Version, select 2.5 or later
      5. Make sure 'Include full drive code example' is unchecked.
      6. Copy the connection string provided.
3. If there is a <password> tag in your connection string, make sure to replace this with your password for the user.

4. Update MapBox Api Key String

1. Follow How-to add url Restrictions to access token and get copy your token.
2. In the Solution Explorer, drop-down the SereneMarine_Web project and double-click the 'appsettings.json' file.
3. Under 'AppSettings', replace the value for the key 'MapboxAPIkey'.

Issues and Solutions

1. Project does not run both files

   • Make sure that for your project selection (next to the Start button), that it is 'Multiple Startup Projects'.

2. No option for 'Multiple Startup Projects'.

   • In the Solution Explorer, Right-click the 'Solution Serenemarine' and select 'Properties'
   • In the left-menu tab, dropdown Common Properties, select 'Startup Project', and then select 'Multiple startup projects' radio checkbox option.
   • Set both projects to Action -> Start.
   • Make sure WebApi starts before the website.