Our goal is to help users find good content, whether it's movies, series, or music. But add it to your favorites list. So you can watch or listen to your favorite content in the future. The project was created for educational purposes.
Mobile view.
Tablet view.
Desktop view.
- StoreLinks web application
- Contents
- Agile Methodology
- Website Goals and Objectives
- Target Audience
- Wireframes
- Database Schema
- Design Choices
- Security Measures and Protective Design
- Features
- Django Administrator page
- User Authorization form
- User Registration form
- User profile form
- Future Features
- Deployment
- Testing
- Technology
- Credits
- Disclaimer
Agile methodology is a project management approach that emphasizes flexibility, collaboration, and iterative progress towards a well-defined goal. It is particularly effective in software development where requirements and solutions evolve through the collaborative effort of self-organizing cross-functional teams. Agile methodologies aim to deliver small, incremental changes in a product to improve quality and adaptability to changing needs.
The MoSCoW prioritization technique is used to determine the importance of various features and tasks in a project. This method categorizes features into four groups: Must Have, Should Have, Could Have, and Won't Have. This helps in effective time management and ensures that the most critical functionalities are delivered first.
Using GitHub Projects, tasks are managed and progress tracked through project boards. Each board will represent an EPIC, with columns for tasks, their statuses (To Do, In Progress, On Hold, Done, Bugs). Issue labels include the user, prioritization and sprints.
Epic is a large body of work that is broken down into user stories. Each Epic in this project represents a key aspect of the platform's development and ensures comprehensive coverage of the required functionalities.
With an emphasis on delivering a seamless user experience, the goal of this project is to provide a comprehensive platform that serves both visitors and registered users. The platform will allow for the development and maintenance of content, present developer profiles, and provide opportunities for interaction. The following user stories outline the essential functionalities and the rationale behind them.
- As a registered user, I want to be able to log in and out of my account so that I can use the platform.
- As a registered user, I want to manage my profile so that I have control of the information held on the platform.
- As a registered user, I want to be able to comment on posts so that provide feedback to authors.
- As a registered user, I want to be able to delete and edit comments so that I can control my engagement on the platform.
- As an Administrator, I want the ability to perform all CRUD (Create, Read, Update, Delete) operations so that manually manage, control and edit content.
- As an Administrator, I want to approve comments and posts so that I can ensure content quality and appropriateness before it is published.
Website Objectives:
-
User Link Storage and Management:
Implement features that allow users to easily save, categorize, and manage their links related to movies and music.
-
Integration of Social Features:
Enable social sharing, commenting, and rating systems to encourage user interaction and community growth.
-
Content Aggregation:
Aggregate content from various trusted sources, including news, reviews, and articles, to provide a one-stop-shop for movie and music enthusiasts.
-
Search and Filter Functionality:
Develop robust search and filtering tools to help users quickly find specific information or discover new content based on their interests.
-
Regular Updates and Fresh Content:
Continuously update the site with the latest news, reviews, and trends in the movie and music industries to keep the content fresh and relevant.
-
Mobile Optimization:
Ensure the website is fully responsive and optimized for mobile devices, allowing users to access and manage their links on the go.
-
Analytics and User Feedback:
Implement analytics to track user behavior and preferences, and gather user feedback to continually improve the website’s features and content.
These goals and objectives would guide the development and operation of the website, ensuring it meets the needs of its target audience while achieving its purpose as a valuable online resource.
A website for storing links and reading information about movies and music could target a diverse audience. The primary target audience may include:
-
Movie and Music Enthusiasts:
Individuals passionate about films and music, who frequently seek out new information, reviews, recommendations, and discussions about their favorite works.
-
Critics and Reviewers:
Professionals or hobbyists who write reviews and articles about movies and music may use the site to store links to sources, interviews, or news.
-
Students and Researchers:
Those conducting research in the fields of culture, film, music, or media may use the site as a tool to store and organize their materials.
-
Bloggers and Content Creators:
They can save and categorize links to resources that will be useful for content creation.
-
Collectors and Enthusiasts:
People who are passionate about collecting movies, music, or other media content may use the site to organize their digital archive.
-
Curators and Event Organizers:
Cultural event curators may store resources for preparing exhibitions, festivals, or other events related to film and music.
Overall, the target audience for the site will consist of individuals who are deeply interested in culture, seek information, and want to store it in a convenient format for future use.
The wireframes for the platform provide a visual representation of the layout and structure of the application. They outline the placement of key elements such as navigation menus, user profiles, content areas, and interactive features. The wireframes ensure a cohesive and intuitive user interface, guiding the design and development process. After the extensive testing was conducted, naturally there are some deviations from wireframes in the live version of the platform.
Mobile Wireframes
Desktop Wireframes
The database schema outlines the structure and relationships between key tables for the platform. The User table stores basic user information and authentication details. The Profile and DevProfile tables extend user details with personal information, bios, and links. The Category table categorizes content, while the Post table manages user-generated content with fields for title, content, author, and metadata. The Comment table handles comments on posts, including author information. These tables are designed to ensure efficient data management and robust user interactions on the platform.
This schema was generated using drawsql.app.
All the movie information was taken from the example database json file. Based on the data from this file, models for movies and genres were built.
The database scheme that was created during project planning.
Database scheme after creating MVP.
The site is made in black and white with color accents on some elements. A simple design with thin lines and not many elements on the page was chosen. The design of the site is based on a template that can be downloaded for free.
Inter is one of the world's most used typefaces with applications ranging from computer interfaces, advertising & airports, to NASA instrumentation & medical equipment.
All movie posters are downloaded from a remote server. The paths to these images were taken from the example database.
The site was developed using the Bootstrap 5 CSS framework. Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.
- New user registration and existing user login were done using standard Django tools.
-
Utilize Django's built-in tools for password management to securely hash and store passwords.
-
Implement robust password policies to strengthen the security of user accounts.
Validation of forms is performed both on the client side using the built-in capabilities of the browser (html), and on the server side using the database.
All important information for database access is stored in a virtual environment. The key files are stored in an .env file. The file itself is added to the list of ignored files.
So I used the Bootstrap5 css framework so the site looks good on both mobile and desktop. Implemented a drop-down list for searching movies by category. There is also a search by movie titles, years of release and content.
Header Desktop
Header Mobile
Footer
Made pages for errors 404, 403, 500. Used a simple design. The user is presented with an error message and a return home button.
Custom error pages
Admin panel
Desktop form
Mobile form
Desktop form
Mobile form
Desktop
Mobile
- Add the ability to add movies to your favorites list.
- Add an option for users to rate.
- Add the ability to create your own playlists.
- Add a music library.
- Add synchronization with API services.
Follow these steps to deploy your Django project to Heroku from VS Code:
- Access the Heroku Dashboard: Log in to your Heroku account and access the dashboard.
- Create a New App: Click on the New button in the top-right corner of the dashboard and select Create new app from the dropdown menu.
- App Name and Region: Enter a unique name for your app and choose a region closest to you (EU or USA). Click Create App to create the app.
- Reveal Config Vars: From the new app Settings, click Reveal Config Vars.
- Set Environment Variables: Set your environment variables as follows:
CLOUDINARY_URL: Insert your own Cloudinary API key here.DATABASE_URL: Insert your own ElephantSQL database URL here.DISABLE_COLLECTSTATIC: Set to 1 for temporary purposes, and remove it for the final deployment.SECRET_KEY: This can be any random secret key.
- Create a
requirements.txtFile: This file lists all the dependencies required by your project. You can install the project's requirements usingpip3 install -r requirements.txt. If you have your own packages installed, update therequirements.txtfile usingpip3 freeze --local > requirements.txt. - Create a
Procfile: This file specifies the commands Heroku should run to start your app. Create the Procfile usingecho web: gunicorn app_name.wsgi > Procfile. Replaceapp_namewith the name of your primary Django app, which is the folder wheresettings.pyis located.
- Automatic Deployment: Select Automatic Deployment from the Heroku app settings to automatically deploy your app whenever you push changes to your GitHub repository.
- Manual Deployment: Alternatively, you can connect your GitHub repository to Heroku manually using the Terminal/CLI:
- Login to Heroku: Run
heroku login -ito log in to your Heroku account. - Set the Remote for Heroku: Run
heroku git:remote -a app_nameto set the remote for Heroku. Replaceapp_namewith your app name. - Push to Heroku: After performing the standard Git add, commit, and push to GitHub, you can now type
git push heroku mainto deploy your app.
- Open App: Once your app is deployed, you can open it by clicking on the Open App button in the Heroku dashboard. This will open your app in a web browser.
- Verify App: Verify that your app is running correctly by checking for any errors or issues.
Forking the GitHub repository allows you to create a duplicate of a local repository. This is done so that modifications to the copy can be performed without compromising the original repository.
-
Log in to GitHub.
-
Locate the repository.
-
Click to open it.
-
The fork button is located on the right side of the repository menu.
-
To copy the repository to your GitHub account, click the button.
-
Log in to GitHub.
-
Navigate to the main page of the repository and click Code.
-
Copy the URL for the repository.
-
Open your local IDE.
-
Change the current working directory to the location where you want the cloned directory.
-
Type git clone, and then paste the URL you copied earlier.
-
Press Enter to create your local clone.
Any changes required to the website, they can be made, committed and pushed to GitHub.
Testing summary and results can be found in TESTING.md file.
- Django: Django is the main Python framework used in the development of this project. It provides a robust and scalable architecture for building web applications.
- Bootstrap: Bootstrap is the main CSS framework used in the development of this project. With its help, it was possible to create a simple and convenient program design. Also, with its help, it was possible to realize a good look of the web application on screens of different sizes.
- Django-allauth: Authentication library used to create user accounts, providing features such as registration, login, and social authentication.
- Crispy Forms: Used to manage Django forms, making form rendering in templates simpler and more elegant.
- visily - ai tool to generate wireframe images.
- Balsamiq: Wireframing tool used to generate wireframe images, allowing for quick and easy visualization of the application's layout and design.
- Bootstrap 5: CSS framework used for developing responsiveness and styling, offering a wide range of pre-designed components and utilities.
- Chrome Dev Tools: Used for overall development and tweaking, including testing responsiveness, debugging, and performance profiling.
- Cloudinary: Image hosting service used to upload and manage images, providing features such as image optimization, transformation, and delivery.
- Coolors: Used to create a color palette, offering tools for generating, exploring, and customizing color schemes for web design.
- Database Schema: database management tool used for creating and managing databases, providing features such as schema design, data modeling, and SQL querying.
- Favicon: Used to create the favicon, providing a simple tool for generating favicons for web applications.
- Font Awesome: Used for icons in the information bar, providing a wide range of high-quality, customizable icons for web development.
- GitHub: Used for version control and as an agile tool, facilitating collaborative development, code review, and project management.
- Google Fonts: Used to import and alter fonts on the page, offering a vast collection of free, open-source fonts for use in web projects.
- Heroku: Cloud-based platform used for deploying web applications. It offers easy deployment, scaling, and management of applications in the cloud environment.
- Jshint: Used to validate JavaScript code, helping identify potential errors and maintain code quality.
- PEP8 Online: PEP8 Online is used to validate all Python code against the PEP 8 style guide, promoting code readability and consistency.
- PostgreSQL: CI designed the database tool for this project. It is a powerful relational database management system.
- Tables Generator: Used to convert Excel testing tables to Markdown format, simplifying the process of creating and formatting tables for documentation purposes.
- TOC Generator: Used to generate table of contents for Markdown files, providing a convenient way to organize and navigate large documents.
- W3C: Used for HTML & CSS validation, ensuring that the project's code complies with web standards and is error-free.
- WAVE: Used for accessibility testing, providing tools to check for accessibility issues such as color contrast and semantic structure.
-
Feedback, advice and support:
-
Insights content and visuals:
-
Learning content:
-
Debugging Issues: