Founding Friends is designed by MCIT online students for UPenn students. The website provides an intuitive portal for students to create events and sign-up to attend in-person and virtual events. The website uses the UPenn email to login so that only UPenn students can sign-up for event. Each event page allows students to efficiently share Zoom meetings links for virtual meetings and photos from the event. Once logged in, students can filter for events in their area, or on a certain date. Students can create a profile to share a brief bio, their interests, and which classes they have completed.
Include the link to your Devpost project page here: Devpost]
- Kyle Li - kyle-guanyi – kyleli@seas.upenn.edu – GitHub
- Kevin Nguyen - kevinocca – kebin@seas.upenn.edu – GitHub
- Bonnie Tse - bonniet – bonniet@seas.upenn.edu – GitHub
This section walks a prospective user through the process of installing and running the project on their local machine. The more detailed and the more accurate, the better. User-friendly instructions will entice prospective users (including judges) to engage more deeply with your project, which could improve your hackathon score.
- WebStorm - JavaScript IDE* PhpStorm - JavaScript IDE (choose IDE of your preference)
- VS Code - JavaScript IDE (choose IDE of your preference)
- Node.js - JavaScript Framework
Provide code samples in this fenced code block.
Give a step-by-step rundown of how to install your project.
Step 1: Download IDE of your preference
- PhpStorm - JavaScript IDE (choose IDE of your preference)
- VS Code - JavaScript IDE (choose IDE of your preference)
Step 2: Download Node.js (version > 16.10)
https://nodejs.org/en/download/
Step 3: Download required packages
Check the version of npm you have
npm -v
If you don't have npm installed, you can install the lastest version of npm using the following command
npm install -g npm
Install the icons from React.js
npm install react-icons@latest --save
npm install react-calendar@latest
Install AWS Software Development Kit
npm install aws-sdk@latest @aws-sdk/s3-request-presigner@latest @aws-sdk/client-s3@latest --save
Install Chakra UI packages
npm install chakra-ui@latest @chakra-ui/react@latest @chakra-ui/icons@latest @chakra-ui/next-js@latest
Install emotion/react for styling in React
npm install @emotion/react @emotion/styledn
Install React.js package
npm install react-dropzone@latest
npm install react-select@latest
Install Framer package
npm install framer-motion@latest
Install Tailwind CSS package
npm install tailwindcss@latest
Install Axios package for HTTp client
npm install axios@latest
Install MongoDB
npm install mongodb@latest
Install Mongoose pacakge for MongoDB
npm install mongoose@latest
Install Next-Auth for login authentication
npm install next-auth@latest
Install Next.js
npm install next@latest
Install Luxon library for dates and time for JavaScript
npm install luxon@latest
Give a step-by-step rundown of how to use your project. Including screenshots in this section can be highly effective for highlighting specific features of your project.
State step 1.
Download the code from mosa-hackathon-2023
State step 2.
Load the code into your IDE.
Step 3:
In the terminal, type npm run dev to run the code.
Step 4:
In the web browser of your choice, navigate to localhost:3000
Step 5:
Step 9: To terminate localhost, in the Terminal type "Control + C"
Welcome Page - http://localhost:3000
About Page
Login Page using Google and restricted to seas.upenn.edu emails only
Event Home Page with Filters
Profile Page
Create New Event Page
Event Page
About, Profile, Sign Out Hamburger Toggle
Which frameworks, libraries, or other tools did you use to create your project?
- Node.js - Server Environment
- MongoDB - NoSQL Database
- Next.js - Web Development Framework w/ Server-side Rendering
- React.js - Web Development Library
- Tailwind CSS - CSS Framework
- NextAuth.js - Authentication for Next.js
- react-dropzone - React hook to create a HTML5-compliant drag and drop zone for files
- Mongoose - Database MongoDB Object Modeling Tool
- Luxon Library - Library for working with dates and times in JavaScript
- Framer - Javascript library for web
- Axios - HTTP Request Utility
- Amazon Web Services Software Development Kit - S3 buckets for storing images
- Google API - Google API for user login for Upenn email accounts only
MIT License
Copyright (c) 2023 Founding-Fathers
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.