Landscape Architecture Film Series Website

An early aughts basic website recreated using modern tools

Description

NOTE: The website now has a custom-made Content Management System (CMS) in alpha. Check it out in its own repo.

In the early aughts, I co-founded the Landscape Architecture Film Series for the Department of Landscape Architecture at the University of Illinois Urbana/Champaign and for which I designed a website.

In need of a website to use as a vehicle to play around with a few AWS services (see Future Work) but not wanting to spend anytime to ideate and design a new one from scratch, I turned to my old website. Its look and feel has aged well, I think, and indeed looks remarkably contemporary. For instance, if the current version of MoMA's film series is anything to go by, bold color blocking isn't a dated design choice.

This, then, is that 20-year-old static website resurrected as a dynamic web application with a data model to speak of, using modern tools such as Flask, SQLite, VS Code and Git.

More screenshots below.

Disclaimer

ALL CONTENTS IN THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY.

Getting Started

Dependencies

• See requirements.txt

Installation

1. Clone the repository:

   git clone https://github.com/ggeerraarrdd/film-series.git

2. Navigate into the project directory:

   cd film-series # For example

3. Create and activate a virtual environment:

   python -m venv venv
   source venv/bin/activate  # On Windows use `venv\Scripts\activate`

4. Install the dependencies:

   pip install -r requirements.txt

5. Create an .env file and set the environment variables:

   Create a file named .env in the app directory of the project and add the following variables:

   SECRET_KEY=your_secret_key
   MAP_API_KEY=your_map_api_key
   DATABASE_NAME="lafs.db"

   Replace your_secret_key (see #6 below) and your_map_api_key (see # 7 below) with your actual secret key and API key.

6. Notes on Flask Secret Keys:

   TODO

7. Notes on Google Maps API Keys:

   For the embedded map to work, you need to set up your own API Key. Before you can create one, you will need to create a Google Cloud project, for which you need a Google Cloud account.

   • Set up a Google Cloud account
   • Set up your Google Cloud project
   • Using API Keys

Usage

1. Go into the app directory and run the command:

   flask run

2. Open the film series website:

   Copy and open the URL displayed after 'Running on' in the terminal.

Author(s)

• @ggeerraarrdd

Version History

Release Notes

• See https://github.com/ggeerraarrdd/film-series/releases

Future Work

Improvements and new features development are ongoing.

• Create CMS for user management and content creation and editing (currently in alpha - see repo)

License

• MIT License

Acknowledgments

• The distribution code for CS50's Finance pset served as a template for the app.

Screenshots

Image created using Portfoliofy.