Место · React

Mesto project frontend on React.

Project 10: Reviewed and accepted version of the project

Project 11: Reviewed and accepted version of the project

Description

5th course work at the Web-development faculty of Yandex.Praktikum

Install

# Clone the repository
git clone https://github.com/artginzburg/mesto-react
# Enter the project directory
cd mesto-react
# Install dependencies
npm i

Available Scripts

In the project directory, you can run:

npm start

Starts a local server on localhost:3000 · With automatic updates on any change and lint errors in the console.

npm run build

Builds the app for production to the build folder

npm run deploy

Places the production version code into the gh-pages branch

To-do

• Ideas (sorted by concern)

  • Move popups to React.createPortal and other container
  • Add locales and English language
  • Clear popups when they are not opened, but keep the open/close transition
  • Use localStorage to make last saved data appear instantly after page refresh (which might look strange with cards, but is a must-have for user profile information)
  • Create FormInput component that wraps up input, its error status, and repeating props
  • Create Popup react component so that ImagePopup and PopupWithForm use exactly identical modal window logic

• Transfer all the features from mesto to mesto-react

  • Live form validation
  • Card features
  • Profile features
  • Close popups on Esc or overlay click

Tech

• JSON API
• BEM Methodology
• CRA
• File Structure — Nested BEM
• Adaptive design
• CSS transformations and transitions
• Flexbox & Grid Layout
• JavaScript (Classes, Modules)
• Image optimization

Links

• Checklist 10
• Checklist 11

<-- Prev.   Portfolio   Next -->