REACT.js + authentification + authorization 'Mesto' (Place') interactive web page student project for Yandex.Practicum

Check out the project on the GitHub Pages

Description

This project is an nteractive gallery where users can share photos. The main concepts and techs I practiced working on the project: React.js Functional Components, useState, useEffect hooks, Asynchronous JavaScript, Fetch API. The data is loaded from and onto external API provided by Yandex. This projects builds upon the functionality of the Mesto React project and adds the functionality of authentification and authorization to it. Previous version of the project can be found here.

This project has been ported to the React.js framework from the pure JavaScript OOP based project.

Functionality:

• Register;
• Sign in;
• Sign out;
• Add new cards;
• Delete cards created by the user;
• "Like" and "dislike" photos;
• Expand the photos by clicking on them (pop-up shows up);
• Close the picture popup by clicking on "X";
• Editing user profile information including name, description and avatar;
• Communication with external API to fetch and patch/delete data

Technologies:

• React.js Functional Components;
• React routing;
• Hooks (useState, useEffect);
• Adaptive layout using flexbox and grid positioning;
• Nested file structure according to BEM methodology;
• JavaScript (Asynchronous JS, Fetch API, OOP);
• Git;
• Webpack;
• Figma

Installation instructions:

git clone https://github.com/AnastasiiaUferova/react-mecto-auth

cd mesto-react-auth

npm install 

npm run build

npm run start

Future project development

Node.js REST API server development