- Description
- Deployed App in Heroku
- GitHub Repository
- App Mockup Screenshots
- Real App Screenshots
- Technologies Used in VideoStar
- Coding Requirements
This application is specially designed for video collectors and keep track of all the videos in their collection.
- The user can search for movies in TMDB (The Movie Database) and add them to their collection.
- After a search in TMDB, the user gets a table of movies with the results of the search term.
- The search results table from TMDB show information about each movie: ** poster image ** movie title ** synopsis ** popularity ** realease date
- The search results table from TMDB, allows the user to click on the Details button to get more details about a specific movie.
- The search results table from TMDB, allows the user to click on the 3 Add buttons (
Add Blu-Ray,Add DVD,Add Digital) to save the specific movie in their collection as Blu-Ray, DVD or Digital format. - The collection can be of 3 different types of videos: Blu-Ray, DVD or Digital.
- The user can save their videos as physical Blu-Ray and DVD or as digital format.
- The user can lend videos to other people and can specify to whom, the lending date and the agreed return date.
- The user can borrow videos from other people and can specify from whom, the borrowing date and the agreed return date.
- To use the app the user must signup for a free account or login with its credentials.
- To signup, the user is required to provide a name, a valid email address and a password.
- To login, the user only needs to provide a valid email and password.
- The user session is controlled with a JWT (JSON Web Token) stored in the browser's Window.sessionStorage.
- The user has a profile that can be updated.
- Once authenticated, the user has access to all the features in the app.
- Users that are not authenticated can not access any resources.
This is a Full Stack application that follows the MVC (Model View Controller) software design pattern. This app uses:
- React JS is the front-end library that is acting as the View.
- Express JS is the web server that is acting as the Controller.
- MySQL is the database server that is acting as the Model.
This app contains React components, helper/util functions, and uses React lifecycle methods to query and display books based on user searches. Node, Express and MongoDB are used in the backend so that users can save books to review or purchase later.
Login and Signup Pages
My Library and Lent/Borrowed Pages
Add To Library and Details Page
Lend and Borrow Pages
Account Page
User Experience Flow Mockup
Relational Database Design Mockup
Login and Signup Pages
My Library and Lent/Borrowed Pages
Add To Library and Details Page
Lend and Borrow Pages
Account Page
-
HTML (Hypertext Markup Language). The standard markup language for documents designed to be displayed in a web browser.
-
CSS (Cascading Style Sheets). CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
-
Javascript. A lightweight, interpreted, or just-in-time compiled programming language with first-class functions. It is the scripting language for Web pages, although many non-browser environments also use it (Node.js, Apache CouchDB and Adobe Acrobat). JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.
-
jQuery. It is a JavaScript library that makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
-
Bootstrap. The world’s most popular front-end open source toolkit to quickly design and customize responsive mobile-first sites.
-
- Expressjs. As a web server.
- Mysql. As a driver for mysql.
- Axios. Promise based HTTP client for the browser and node.js
- Bcryptjs. A library to help hash passwords.
- Dotenv. Loads environment variables from a
.envfile intoprocess.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology. - If-env. To simplify npm scripts.
- JSON Web Token. Open industry standard (RFC 7519) method for representing claims securely between two parties.
- Sequelize. A promise-based Node.js ORM (Object-Relational Mapping) for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more.
- Concurrently. For development purposes only. Instead of running all commands in separate terminals, we can use concurrently, which allows to run multiple commands concurrently.
- Nodemon. For development purposes only. It automatically restarts the node application when file changes in the directory are detected.
- Moment. Library for parsing, validating, manipulating, and formatting dates.
- React. A library for creating user interfaces.
- React DOM. The entry point to the DOM and server renderers for React.
- React Icons. Utilizes ES6 imports that allows you to include only the icons that your project is using.
- React Router DOM. DOM bindings for React Router.
- React Scripts. Configuration and scritps for Create React App
- React Toast Notifications. A configurable, composable, toast notification system for react.
- Read More React. It "intelligently" truncates text at the appropriate point given a min, an ideal, and max text length.
- React Date Picker. Allows a user to use a calendar to pick up a date when filling an input form. A date picker for the React app, where the user can pick days, months, years, or even decades. Supports virtually any language. No moment.js is needed.
-
Create React App. Sets up a modern React web app by running one command.
-
Full CRUD Operations. Create, read, update, and delete are the 4 basic functions of persistent storage.
-
Heroku. A cloud application platform to host web apps. It is a Platform as a Service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
-
MVC (Model-View-Controller). This app follows the MVC paradigm, a software design pattern commonly used for developing user interfaces which divides the related program logic into 3 interconnected elements.
-
Environment Variables. An environment variable is a variable whose value is set outside the program, typically through functionality built into the operating system or microservice. An environment variable is made up of a name/value pair, and any number may be created and available for reference at a point in time.
-
Adobe Illustrator. The state of the art in illustration. A vector-based graphics software that scales down for mobile screens and up to billboard size. The results always look crisp and beautiful.
-
Adobe Photoshop. A photo editor to create and enhance photos, images, and designs.
-
Trello. A visual tool for organizing your work and life. It is an excellent lightweight project management tool. It is easy on the eye and relatively straightforward to use.
-
MySQL Workbench. A unified visual tool for database architects, developers, and DBAs.
-
Postman. The Collaboration Platform for API Development. Quickly and easily send REST, SOAP, and GraphQL requests directly within Postman.
-
Slack. Slack brings the team together, wherever you are. With all of your communication and tools in one place, remote teams will stay productive no matter where you’re working from.
-
Zoom. Unifies cloud video conferencing, simple online meetings, and group messaging into one easy-to-use platform.
-
Google Meet. Premium video meetings in the browser.
This application has the following requirements:
- Must use React JS
- Must use Node and Express JS Web Server
- Must be backed by a database, like MySQL or MongoDB
- Must use a ORM (Object-Relational Mapping) like Sequelize or a ODM like Mongoose
- Must have full CRUD routes for retrieve, add, update and delete data.
- Must be deployed in Heroku with data.
- Must use at least 2 new libraries, packages or technologies.
- Must use user authentication
- Must have a polished font end user interface.
- Must follow the MVC paradigm
- Must follow best practices for directory structure.
- Must follow good quality coding standards (indentation, scope, naming conventions, etc).
- Must use an external API call.
- Must hide the API key with environment variables.
- Must hide sensitive information from the public.