- About the Project
- Technologies and Standards Used
- Product Specification Document
- Future Improvements
- Live Demo
Around the U.S. is a responsive website where a user can have a collection of the pictures of his journey around the US. The webpage interacts with the API endpoints using REST API calls. As of now, the functionalities available on the webpage are:
- When the page loads, all the existing image cards load from the server.
- When the page loads, the current user's name and about info are loaded from the server.
- User can edit and save his profile details to the server.
- User can update his avatar by uploading a new image to the server.
- User can like or unlike the images. The status is stored on the server.
- User can view the number of likes on an image card.
- User can add a new card with the title and the link for the image. The new card is stored on the server.
- User can delete the image cards that he has added, if he wishes to. The card would be deleted from the server too.
- User can also have a closer look of the images by clicking on them.
- Live input validation on all the forms.
- Users can close the popup by clicking on the overlay, i.e. anywhere outside the popup's borders.
- Users can close the popup by pressing the Esc key.
- A new user can register.
- A registered user can login and logout.
Note: All authorization, registration and token requests go through to the server running on https://register.nomoreparties.co.
The technologies that have been used are:
- HTML (Hyper Text Markup Language)
- CSS (Cascading Style Sheets)
- React.js
There are various tools that have been used throughout the project design and development:
| Tools | Usage |
|---|---|
| Figma | For referring to the product design specification |
| TinyPng | For JPEG/PNG Image Compression |
| SVGOMG | For refining and compressing SVGs |
| Webpack | For bundling all the ES modules |
| Babel | For transpiling JS code |
The main concepts that have been emphasized are:
-
Responsive Web Design
- The webpage has been developed following the desktop first approach.
- The webpage has been designed and developed for:
- Maximum Width:
1280px - Minimum Width:
320px
- Maximum Width:
-
BEM Specification
The website is using BEM — Block Element Modifier methodology to create reusable and understandable components in CSS. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast and it allows reuse of existing code without copying and pasting. We are also using Nested BEM File structure organization for CSS. -
Git Conventional Commits Specification
We are using Git Conventional Commits 1.0.0. It provides an easy set of rules for creating an explicit commit history making it easier for people to contribute to our projects by communicating the nature of changes clearly. -
API (Application Programming Interface)
An API is a set of definitions and protocols for building and integrating application software. It’s sometimes referred to as a contract between an information provider and an information user—establishing the content required from the consumer (the call) and the content required by the producer (the response). -
REST API Methods
REST guidelines suggest using a specific HTTP method on a particular type of call made to the server (though technically it is possible to violate this guideline, yet it is highly discouraged). We have used the following methods:HTTP Methods Function HTTP GET To retrieve resource representation/information only – and not to modify it in any way. HTTP POST To create a new resource into the collection of resources HTTP PUT Primarily to update an existing resource (if the resource does not exist, then API may decide to create a new resource or not). HTTP PATCH To make a partial update on a resource. HTTP DELETE To delete resources (identified by the Request-URI).
You can view the product specification document here
- The data on the webpage should persist between page reloads - Done
- The user should have ability to add pictures. - Done