Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a114273

Browse files
Update README.md
1 parent f95709d commit a114273

File tree

1 file changed

+21
-3
lines changed

1 file changed

+21
-3
lines changed

‎README.md

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
# React Notes App
22

3+
This is a MERN-based notes web-app with authorisation, live synchronization and functional user interface. Here you can edit notes text content, add some markdown elements, upload images for cards.
4+
5+
![Screenshot](https://i.postimg.cc/VN07rkNx/11.png)
6+
7+
## About
8+
9+
Project has "cliend and server" structure. You can find it in the corresponding subfolders.
10+
11+
The server with REST API was built with Node.js platform and Express library. It has three main API routes, additional route for WS addres check and default route for static client build. I used MongoDB and Mongoose lib to store and manage data. There are three entity types in database - Users, Notes and Media (images). For authorization, I used the JsonWebToken and Bcrypt libraries. I also used WebSocket to connect client and server for real-time synchronization.
12+
13+
The client was made with React framework. It was styled with Bootstrap 4. I used React Router DOM extension to route client pages - authorisation, main notes page and about page. I also used some libs to make interface more useful and pretty. The main one - React Stack Grid, used to conveniently arrange note cards on the screen. There are many custom hooks here to manage authorization, interface elements, user data, and their synchronization. Client was built with Progressiwe Web App technology. So it can be partially cached for offline use, or rather for faster loading.
14+
15+
I also tried to make unit tests and documentation based on code comments. You can see it below in this document.
16+
317
## See demo
418

519
Open [mern-notesapp](https://mern-notesapp.herokuapp.com/) (here synchronization disabled) or [react-notes](http://react-notes.std-1033.ist.mospolytech.ru/) (here PWA disabled) to view working demo in the browser.
620

7-
![Screenshot](https://i.postimg.cc/HkCP7MgV/6.png)
21+
![Screenshot](https://i.postimg.cc/2jtfgVZW/10.png)
822

923
## Development
1024

@@ -67,6 +81,8 @@ Local `mongoUri` will be `"mongodb://localhost:27017/mydb"`
6781

6882
### Mongo installation on Ubuntu 20.04
6983

84+
Be careful, it's correct relative path in your commands
85+
7086
1. To prepare and setup mongo
7187

7288
- run next in bash:
@@ -119,6 +135,8 @@ module.exports = {
119135
};
120136
```
121137

138+
Be careful - bash start folder on your server may be located differently
139+
122140
## Deployment on Heroku
123141

124142
- Create Heroku app
@@ -135,8 +153,8 @@ module.exports = {
135153

136154
### `npm run doc`
137155

138-
use to generate documentation
156+
use to generate docs
139157

140158
### [react-notes-docs](http://react-notes-docs.std-1033.ist.mospolytech.ru)
141159

142-
see exiting docs
160+
see exiting documentation

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /