Milestone 3 Project: Data Centric Development - Code Institute
For my third milestone project, I choose to create an app that allowed users to share, rate, and comment about their favourite anime titles.
A live demo can be found here
Here is the responsiveness preview:
Have you ever tried to remember the name of that really good anime you watched ages ago? Have you ever tried to remember what your intial thoughts on it were or all of the reasons why you liked (or disliked) it? If you're anything like me, then the answer to both of these questions is yes. That's where MyAnimeVault comes in.
Think of it as a very niche and collective film critiquing app for personal use. You watch an anime that you like or dislike that you might want to remember for the purposes of recommending it or rewatching it later, simply make an entry, and there you go. Your intial thoughts and feelings are recorded for reference later.
- UX 👍
- Project Goals
- Target Audeience Goals
- Site Owner Goals
- User Stories
- User Requirements and Expectations
- Design Choices 🎨
- Colours
- Background Images
- Wireframes 🔧
- Website Layout
- Account Creation Flowchart
- Database Design
- Features 🎡
- Features that have been developed
- Features that will be implemented in the future
- Technologies Used 👨💻
- Planning + Testing ✏️ 🔌
- Bugs 🐞
- Deployment 🚀
- Deploying to Heroku
- Locally run this project
- Credits 💳
- Disclaimer 📝
The goal of this project is to provide users with a online repository in which they can record their opinions of the anime titles they've seen, rating them and providing their intial thoughts. This project will serve as a collective film critiquing service for personal use that caters to a very specific genre and demographic.
- To be able to record anime titles in one place.
- To be able to record my intial thoughts, feelings, opinion on each title.
- To be able to rate each title.
- Generate further interest in anime/Japanese animation
- Encourage curiosity about the viewing habits and perspectives of others.
- Encourage critical thinking about the anime titles that we watch, and provoke deeper exoloration of their themes, ideas, etc.
- Collect user information for the purposes of site analytics and gaining insights into how the general public receives certain titles.
- As a user, I expect log in to be quick and easy.
- As a user, I expect to navigation of the site to be intuitive and require as few clicks as possible.
- As a user, I expect to maaking an entry to be quick and simple.
- As a user, I expect my entries to be stored in such a way that makes them easy to view and access.
- Interact with a visually appealing website.
- Navigate the website with ease & with fast load times.
- Make entries in an quick and uncomplicated way.
- Find previous entries easily and see them clearly displayed.
- The users can interact with the elements visible on the page.
- The website loads with sufficient speed.
- The content on the website renders correctly on desktop, mobile and tablet.
- The user feels satisfied with the experience.
It was important for me to create a project aesthetic that suited the theme of Japanese anime, and so I decided to use the same template I used for my milestone 2 as a base, because it fit the theme really well. Therefore, I opted for a unifying background image that contained some popular Japanese titles. This was then framed by a dark footer and navbar, which the social media handles of the footer being pink, because when most people think of anime, they often think of either soft pastels like pink. I also opted for the accordians to be of a similar black to the footer and navbar, to provide more of a sense of cohesion. All in all, I feel all of these elements blended together in a way that appeared cohesive and seamless as well facilitated a positive user experience.
I carefully considered which colours I wanted to use because I knew I wanted to mix some genre-defining pastels with some darker elements, but I also needed to ensure that the colour combinations complimeted the background image as well as each other while not overpowering one another or competing for the user's attention in jarring or dissonant way. So, after careful deliberation, I decided to use coolers, which is a colour scheme generator. It helped to experiment with dfferent palette and eventually decide on a group of colours that I think were attractive and appropriate for the project.
The background image for this app was taken from Unsplash.
I used balsamiq to develop the wireframes for this project. I chose balsamiq because their process for creating wireframes is quick, simple, and intuitive. Having the wireframes developed before commencing the project made development much easier and more straightforward. It provided a basic blueprint that I could follow which made the endeavor faster and more manageable.
The wireframes can be found here. However, certain elements of the initial wireframes were left out of the final project due to time constraints. These elements include the log-in feature and the user account page.
Despite the account creation and log in process seeming rather simple, I still opted to create a very basic flowchart for it for the purposes of visualizing the user's journey. It can be found here. The account creation feature was left out due to time constraints.
I used NoSQL features from MongoDB in order to be able to map out the collection below.
The types of data that are stored in the MongoDB database:
- String
- Number
Entry Collection:
| Title | Key in Collection | Data Type |
|---|---|---|
| Title | title | String |
| Category | category | String |
| Rating | rating | Number |
| Comments | comments | String |
View the schema templates for the database collections here.
- Fixed navbar.
- Animated social media handles.
- Responsive accordian display of entries.
- Register/create an account.
- Log-in and log-out functionality.
- Email authentication for added security.
- Search bar for entries to make locating them easier when the list grows.
Planning for this was relatively smooth because I had a clear idea of what I wanted to achieve before starting it. However, I ran into a few difficulties, the main one being time constraints. Therefore, I couldn't include as many features as I planned to.
I used a combination of DevTools and Am I Responsive? to test the responsiveness of the app on devices of differetnet sizes and makes. I also provided a link to the app to family and friends so as to receive firsthand feedback as to how responsive the app truly was. I received no complaints. An example of the responsiveness can be viewed in the first image at the beginning of this ReadMe.
I tested the navbar and it works as intended. It's fixed and the links bring you to the relevant pages.
I tested the social media handles. Their animations work and they bring you to the relevant pages.
I tested the CRUD functionality and it works as intended. Users are able to create an entry, view entries, edit entries, and delete entries.
I used Code Verifier, and found no errors:
I used PEP8, and found a few errors, the majority being to do with spacing. However, I prefer this spacing as I feel it makes the code a little neater:
I used CCSSLint, and found the following errors and warnings:
I didn't encounter any noteworthy bugs while building this project. I surmise that this was because of the relatively simple nature of what this app entailed. The process was comparatively straigthforward once I learned how to do what I needed to do.
MyAnimeVault was developed on Gitpod, using git and Github to host. Howeever this section will be written from the perspective of Visual Studio Code because I started with that IDE and then moved to Gitpod halfway through.
You will need to install the following:
You will also need a MongoDB account for the databsae.
WARNING: You may need to follow a different guide based on the OS you are using, read more here.
- 1: Clone the MyAnimeVault repository by either downloading from here, or if you have Git installed typing the following command into your terminal.
git clone https://github.com/kel151/MyAnimeVault- 2: Navigate to this folder in your terminal.
- 3: Enter the following command into your terminal.
python3 -m .venv venv- 4: Initilaize the environment by using the following command.
.venv\bin\activate - 5: Install the relevant requirements & dependancies from the requirements.txt file.
pip3 -r requirements.txt-
6: In your IDE now create a file where you can store your SECRET_KEY and your MONGO_URI, follow the schema structure located in data/schemas to properly setup the Mongo Collections.
-
7: Run the application using
flask run or
Python3 app.py- 1: Create a requirements.txt file using the following command.
pip3 freeze > requirements.txt- 2: Create a Procfile with the following command.
echo web: python3 app.py > Procfile- 3: Push these newly created files to your repository.
- 4: Create a new app for this project on the Heroku Dashboard.
- 5: Select your deployment method by clicking on the deployment method button and select GitHub.
- 6: On the dashboard, set the following config variables:
| Key | Value |
|---|---|
| IP | 0.0.0.0 |
| PORT | 8080 |
| MONGO_URI | mongodb+srv://:@<cluster_name>-qtxun.mongodb.net/<database_name>?retryWrites=true&w=majority |
| SECRET_KEY | "your_secret_key" |
- 7: Click the deploy button on the Heroku dashboard.
- 8: The site has been deployed the Heroku.
The images used in this project were taken from Unsplash, an open license and highly customizable resource that I greatly recommend.
- My mentor, Simen, for all of his patience, advice, and recommendations.
- The Code Institute Slack Community for all of their advice, kindness, and encouragement.
- The Student Care team for the constant support, encouragement, and check-in messages.
- Claire Lally from the Student Care Team who has been staunch supporter and a source of light and inspiration during this process.
- The Code Insitute tutoring team (particularly Samantha, Scott, Xavier, and Tim) for their patience and perpetual willingness to help, no matter how late.
- Michael from the tutoring team who stayed up with me many a late night to help. I wouldn't know as much as I do now without his patient and effective guidance.
- My classmate Sebastien Denommee for all of his support and advice on improving my work.
- George Pyott for his help in improving my ReadMe, the example he set was instrumental.
The contents of this website are for educational purposes only.