Note: According to GitHub, one of this projects dependencies (webpack it seems) may have a security vulnerability. We do not plan on updating it since we're done with this project.

Project: Projects

An Olin project database that makes life a little easier.

Olin students can record their projects in Project: Projects to keep track of all the cool stuff they've done, easily build their portfolios, and share their experiences. This is a project started by Matthew Beaudouin-Lafon (Olin College '19) and Emily Yeh (also Olin College '19).

For full documentation of all pieces of code, look no further than our documentation site.

Installation

On OS and Linux, enter the following into a terminal, one line at a time (replacing path/to/file with the path to the downloaded file):

git clone https://github.com/MatthewBeaudouinLafon/Project-Projects
cd path/to/file
python3 backend.py

Then, open another terminal and enter the following, one line at a time (once again replacing path/to/file with the path to the downloaded file):

cd path/to/file/webapp/src
npm install
npm start

The app should now be running on [localhost:9090]. Navigate to localhost:9090 in your web browser. If there are any issues with installing and starting the app, please refer to the app's libraries and dependencies.

About Project: Projects

After surveying 45 students at Olin (a whole 12.8% of the student body), it was discovered that recording projects is something of an ordeal for most Oliners. Some respondents created their own websites and portfolios, while about a third said that they had not created any kind of professional project archive yet. In addition, about half of the respondents reported that they update their websites, portfolios, or PDFs only when job season is imminent. This all seemed to be a strong sign that the experience of recording projects at Olin has room for improvement.

Faculty were also asked for their thoughts on recording projects at Olin. The reasons that professors have for archiving projects range from personal reasons (learning from past mistakes, refreshing themselves on course policies, etc.) to institutional reasons (training new faculty members, giving prospective student tours something to look at, etc.) to students' reasons (past students contact their professors years down the road to ask if they still have records of their projects, because they have a job interview coming up and it would look really good if they could show it).

All of this feedback was gathered to form the basis for the creation of this project. Project: Projects is going to make the lives of students easier by facilitating the creation of portfolios and lowering the activation energy for recording projects, and it's also going to make the lives of faculty easier by placing all student projects in one convenient location.

Below are some videos of the current state of the app, and how a user might use them. (Click any representative image to view.)

Front Page and Login

Searching for Projects

Creating a Project

Technical Documentation

To run the database, simply run the following commands.

cd <path/to/file>
python3 backend.py

The file automatically empties and refills its MongoDB database upon being run. However, the main functions dealing with populating and emptying the MongoDB database are located in private_database_functions.py (for now). Much of the data being used right now is student data, which is why the .csv files required to run private_database_functions.py are not located on this repository; however, if you would like to contribute to this project, please email Matthew or Emily to gain access to those .csvs (after we screen you rigorously for ill intentions).

Status of Things

Libraries & Dependencies

Known Issues & Future Work

There are many potential features to add that would make this app way more usable. Here are a few to start with:

A true project slideshow: Give a glimpse of the next project before transitioning.
Importing and exporting: Let projects be imported/exported in the form of a PDF, a JSON blob, etc.
Tags: Allow users to add tags to their projects, and allow the projects to be found through tags.
Just make the app look better with CSS witchery

There are many other potential features, as well as minor issues that are basically just unimplemented features, that can be added to our project. If you want to tackle some, try CTRL+F'ing "TODO" in any file.

Contributing

Fork it (https://github.com/MatthewBeaudouinLafon/Project-Projects/fork)
Create your feature branch (git checkout -b feature/FEATURE)
Commit your changes (git commit -am 'Add some FEATURE')
Push to the branch (git push origin feature/FEATURE)
Create a new pull request
That's it!

Credits

_{Thank you to Oliver Steele, Jeff Goldenson, and Emily Ferrier for their help in the development of this project!}

_{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.}

Deploy to Heroku

This article looks useful.

Adapting this slightly:

Create two Heroku apps
Add these to your repo as different remotes
Follow these instructions to specify different build packs for the front and back end
Add a configuration environment variable to specify the back-end base URL. On dev, this is localhost with a different port (so can default it to that it to e.g. localhost:5000).
On the Heroku front-end app, set this configuration variable to the URL of the back-end domain.
In the back-end server code, you may need to enable CORS. Here's a Flask extension (that I haven't tested or vetted).
Procfile needs to run a binary that looks at a configuration variable to decide which binary to run
As we discussed, you also need to explicitly run the setup if your configuration files are not at the top level.
- In this case the binary that runs Procfile will need to cd into the directory
- Heroku caches the node_modules, to make subsequent installs faster. If you are using a subdirectory, you will want to enable cache for its node_modules subdirectory.
- You may also want to consider yarn instead of npm. It's faster, and is better at updating node_modules to exactly match the currently specified packages and versions. (Run yarn locally, and add git add yarn.lock.)

Document what you do, and add this to the doc set.

matthewbeaudouinlafon / project-projects Goto Github PK