shihyun0130 / your-idear

midterm project of web programming in 2019

YOUR IDEAR

The concept of this app is originally comes from the process of design thinking, which is always using post-its when discussing a topic. In this app, users can write down their ideas on a post-it, and then upload it to the wall created by a group of people.

Install

front end

git clone https://github.com/b05705019/Your-idear.git
cd Your-idear
npm install
npm start

backend

git clone https://github.com/b05705019/Your-idear.git
cd backend
npm install
npm start

NOTE

The front end installed on your device is served by the backend deployed on Heroku.

Deploy

YOUR IDEAR is deployed to Heroku, you can visit it with your desktop in this site: https://your-idear.herokuapp.com/

How to use this app

1. Enter your username (you can also use the default username: Guest).
2. Enter the wall name that you want to join, if the wall doesn't exist yet, you can also create a new wall. It is better for you to add some description for the new wall.
3. Tap on the button in the upper right corner to explore functions of this app.
4. Or you can also follow the tutorials on the bottom right corner.
5. Log out: Tap on the button which represent your user name in the upper right corner, and you can log out. Remember, if you log out, next time you have to enter your user name again before you want to use this app.
6. View the post-its in the wall: Tap on the button in the upper left corner, you can enter the wall that you join.
7. The post-its in the wall will update automatically when someone upload a post-it to the wall.
8. When user upload a post-it, there will be an alert showed on the screen to tell the user that a post-it is uploaded successfully.
9. When user refresh the page, the page will still be in login state.

my contribution

All of the codes are generated by myself, including the css of front end.

Gained knowledge

The concept of this app is originally the project designed to code by kotlin and php as a native app. But there were still something which can be done better, so I try to use react and node.js to design this app.
CSS in the front end is the one that takes the most time in this project, and being unfamiliar to backend is another difficulty that I was encountered while doing this midterm project. Sadly, due to time limit, there are still a lot of functions that is worthy for adding but I can only choose to leave them to my final project or finish them after class, for example: to write down the post-its by hand.
Being more familiar with react and node.js and css design is what I have learned in this project, and being happy when finish a project but not simply a small homework or practice is another one. The one that I have just learn in a few minutes ago is that when I deploy the app to heroku, I found that I can't reload the page or the page will represent "cannot Get /url", it is because that the url that server get will determine which page to present. However, at the same time, the server have to deal with the data that front end request for the data in the database, thus, to redesign the server for routing can successfully solve this problem.