Skip to content

Latest commit

 

History

History
65 lines (54 loc) · 7.29 KB

README.md

File metadata and controls

65 lines (54 loc) · 7.29 KB

Hi there, I'm Dmytro

Frontend React developer from Ukraine

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

Launch

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:

image

Description

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.

Screenshot_1

Administrators, in turn, can add content to the website, news, reviews and video content.

Screenshot_1

Screenshot_1 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.

image

Screenshot_1 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.

image

Screenshot_5 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.

image

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.

image

Screenshot_12 All styles used the SASS preprocessor.

Small moments

  • 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.

image

Thank you for checking it out! Screenshot_12