Given the theme of cinema and our passion for sustainability, we wanted to find an intersection of these topics. We were inspired by how the average feature film utilizes a lot of carbon emissions. We wanted to raise awareness on this niche topic through a fun, decision-making game. We took a lot of inspiration from the game SPENT, which challenges players to face the realities of poverty and financial responsibility.
We wanted to create an exciting experience that highlights filmmaking's hidden costs—financial, environmental, and creative. The Final Take challenges players to make smart, impactful decisions behind the scenes, from storyboarding to filming to marketing.
We used Figma to design the various pages on The Final Take. Using Next.js, TailwindCSS, and TypeScript, we built the web app. We designed a scoring system that ties each decision to three key stats: Budget, Sustainability, and Film Quality.
It took several iterations to get the costs and rewards just right so players wouldn't fall into debt immediately or breeze through with no consequences. We also ran into consistent merge conflicts due to the lack of code organization.
We're proud of being able to have a clean user interface design that still fits the noir film aesthetic visual theme. Additionally, all assets were created by the team. We're also incredibly proud of being able to establish complicated animations for a fluid, responsive look between options.
In creating this project, we researched and gained new perspectives on the processes of making a film and how each choice can affect the environment. Additionally, we have worked together in a team before, but found it difficult to get a functional product. This was our first time being able to move forward by learning to communicate more. From a technical perspective, we learned more about creating a dynamic website, instead of a static one, by taking our skill sets and applying them in a new direction.
For the future, we want to expand The Final Take to have more dynamic storylines, randomized events, and more visual elements.
Final Take runs on Node.js Version 20.10.0 and higher. Please ensure you have Node.js installed via the official website.
This project is built using Next.js, a React framework. Next.js is automatically installed when you install all dependencies for this project.
The following environment variables are required and must be stored in an .env file:
NEXT_PUBLIC_OPENROUTER_API_KEY=# Install dependencies
npm i
# Add dependency
npm i <dependency>
# Remove dependency
npm un <dependency># Open a browser at localhost:3000
npm run dev# Rewrite code recursively with proper formatting
npm run format
# Show formatting differences recursively
npm run checknpm run eslintnpm run build