My project is a ready-made online platform for watching animated series, publishing news, detailed control and editing of any publications, communicating in comments, maintaining statistics on series and much more. The project interacts with Firebase.
At the moment I have disabled reading and writing to the database, in which case my contacts are available for communication.
- HTML, Sass, JavaScript, React, Redux, Webpack
- Axios, Jest, Babel, gh-pages
You can try the project simply by following the link: https://suriones.github.io/AnimazeHub/
For a more detailed view, copy the repository from the main branch, and then enter the following commands into the console:
- Install all dependencies: "npm install"
- Start webpack dev-server (8080 port): "npm run dev"
- URL: http://localhost:8080/
The differences between the Dev version and the Deploy version are only the configuration of the webpack config:
My project allows users to watch animated series, register, communicate with other users through comments, and also vote for their personal favorite series to promote them in the rating feed. Users can also view brief main updates on the website in special news cards, and for more extensive news articles from the world of TV series there is a “Preview” section, where there is no character limit and there is an option to further customize the appearance of the article, with images, headings and more.
Administrators, in turn, can add content to the website, news, reviews and video content.
Local storage stores all information entered by the user. Comment field, authentication field, all fields and any interaction. The database stores complete information on the content and all users, having the following form.
All my components use only information from props, without importing any external files. Only container components have dispatch and DAL functions, which are also transmitted through props.
Many components are wrapped in React.memo for optimization, and almost all pages include React.lazy functions. While all components are loading, a loading circle will pop up. All components are functional, hooks used: useEffect, useState, useParams, useRef.
The comments component has a large amount of logic and is placed separately, so it can be used separately from the anime page. She just needs to pass the corresponding object through props. Comments on its use are left here.
The container component is responsible for the logic, the “dumb” component is responsible for rendering.
Pages are divided into groups of 10, they can be switched, 5 comments are displayed at a time, and when a new one is sent, it is immediately re-rendered and the last page opens.
Users can respond to comments from other users by clicking on the nickname. Comments for each anime are stored in the anime object itself, but by passing the required object to the comments component, you can implement it on any other page.
There are no “artificial” elements on the site, made only for appearance. Each element fully performs its stated function, likes are taken into account in the database and each user has a personal list of liked anime, the recommendations page takes the top 5 anime by likes and offers them to all users. Any information displayed on the site is taken and processed from the database; there is almost no handwritten text in the code.
The site is also optimized for different user screen sizes other than mobile devices. The desktop design does not allow simple reduction and sorting to correctly display information for mobile phones; this requires a large-scale revision of the appearance.
All styles used the SASS preprocessor.
- The site implements notifications about various events and information.
- If the user enters data incorrectly (incorrect login or password, or the username is already taken during registration), an animation of the error and coloring of the fields is implemented.
- Each page has a loading animation in case the render takes a long time.
- Under each news and review, the real time and author are indicated, which are saved in the database.
- Likes are implemented in one post with a request to send a like, and the response is used to display the current number (that is, when you click like, the number can be not just +1, but immediately +10, if other users liked the anime before updating the page).
- Also, when registering, you have the opportunity to enable the administrator role to try out the functionality.
