Demo - Github Pages
A project to practice Vue using "User API" that provided by ALPHA Camp online course.
Try to realize user list functions in Twitter/LinkedIn.
You can follow or unfollow someone in the unlimited scroll page.
- HomePage
- Find everyone who you want to be friends with.
- Use key word to search someone.
- Click User avatar or name to have detailed information.
- Check who you're following is available.
- Able to switch from Card to List mode.
- Able to follow or unfollow someone.
- Unlimited scroll page design.
As User API only provide with "GET Users", "GET User", follow / unfollow function is realized with session storage to simulate database.
Event listener will be removed to release resources once page is fully loaded.
| TOP | ||
|---|---|---|
| App.vue | Navbar | |
| ModeBar | ||
| Home (main) | Spinner、UserCard、UserList | |
| Modal |
※ Home、Following、Search share Home.vue page.
| item | item | item | item | |
|---|---|---|---|---|
| Frontend | HTML5 | CSS3 | JavaScript | |
| Concept | RWD | MVC | AJAX | |
| Framework | Vue.js | jQuery | axios | Bootstrap |
| API information | |
|---|---|
| Users data | Alpha Camp API for course |
| banner images | Lorem Picusum |
Clone this repository
$ git clone https://github.com/chuni-lin/user-list-vue.git
install dependencies
$ npm install
run
$ npm run serve