https://github.com/proehavshiy/react-mesto-auth

React SPA "Mesto"
https://github.com/proehavshiy/react-mesto-auth

css-grid flexbox grid javascript react react-app

Last synced: 3 months ago
JSON representation

React SPA "Mesto"

• Host: GitHub
• URL: https://github.com/proehavshiy/react-mesto-auth
• Owner: proehavshiy
• Created: 2021-05-28T09:27:28.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-08T14:00:29.000Z (almost 3 years ago)
• Last Synced: 2024-08-03T23:03:16.109Z (7 months ago)
• Topics: css-grid, flexbox, grid, javascript, react, react-app
• Language: JavaScript
• Homepage:
• Size: 2.75 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React SPA "Mesto"

It's my first SPA with auth, registration and connection with API




[Ready project is here. Need to register and login first](https://proehavshiy.github.io/react-mesto-auth/)

## What can it do:

* Register, login & logout

* User's auth & registration by jwt token and API

* Change personal information (avatar, name, signature)

* Add a new card

* Delete only yours cards

* Like any card

## Watch the demo

[![my diploma video demo](https://i9.ytimg.com/vi/zhSUW7eG1lg/mq2.jpg?sqp=CKSknZEG&rs=AOn4CLALSbjv1RH5JrNBjXYDP3d5wLEJ7g)](https://youtu.be/zhSUW7eG1lg)

## Technologes:

* `HTML`, `CSS`, `JavaScript`, `React SPA`

* `Semantic` HTML

* `BEM` nested blocks

* `Flex` & `Grid` layouts

* `Optimized` pics

* `Reusable` & `mixed` blocks of code

* `Adaptive and responsive` design by media-queries

* `Relative & absolute` block sizes

* `live-validation` by Constraint validation API of all inputs and submit buttons with `changing text status`

* Close of popups by tapping on the `esc` button

## Guidelines for the project

[Checklist(rus)](https://code.s3.yandex.net/web-developer/checklists-pdf/new-program/checklist-11.pdf)

## You can run this project locally:

* clone branch with `[email protected]:proehavshiy/react-mesto-auth.git`

* `npm run start` - run the project

* `npm run build` - build final version

* `npm run deploy` - build and deploy