'Mesto' (Place') interactive web page student project for Yandex.Practicum

Mesto.mov

Check out the project on GitHubPages

Description

This project is an nteractive gallery where users can share photos. This is a student project created during multiple sprints (4-9 sprints) of a web development course of Yandex Practicum. Trhoughtout these sprints, different layers of functionality were added to the project. The main concepts and techs I practiced working on the project: advanced features of HTML and CSS, Asynchronous JavaScript, OOP, Fetch API, form data validation. The data is loaded from and onto external API provided by Yandex.

Functionality:

• 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", area outside of the photo or ESC button;
• Editing user profile information including name, description and avatar;
• Form validation on the client side;
• Communication with external API to fetch and patch/delete data

Technologies:

• Adaptive layout using flexbox and grid positioning;
• Nested file structure according to BEM methodology;
• JavaScript (Asynchronous JS, OOP, DOM API, Fetch API);
• Client-side form validation;
• Git;
• Webpack;
• Figma

Installation instructions:

git clone https://github.com/AnastasiiaUferova/mesto.git

cd mesto

npm i webpack --save-dev

npm run build

npm run dev

Future project development

In the subsequent sprints the project was refactored using React.js.