This is a web development coursework that taught about nodejs and its npm
ecosystem and gave an opportunity to exercise front-end and back-end
development. The application is a to-do list application where it involves
organising football team trips and managing a list of assigned football players
as well as those involved with them and assign them tasks.
The application consists of three components:
- front-end part: it is implemented in VueJs as a SPA (Single Page Application). This is a way for web users to interact with the application and perform its functions.
- Implementation can be found in
vue-ui
directory.
- Implementation can be found in
- back-end part: it is implemented in Express.js as a
back-end CRUD application that completes different client requests, performs various validation and
application logic and interacts with a database for storing and retrieving
persistent data.
- The implementation components can be found in
db
,routes
andutils
directories.
- The implementation components can be found in
- database: A mongodb is used to store data, manage
it and serve various client queries on it.
- Database document schemas can be found in
db_config/schemas
directory.
- Database document schemas can be found in
The to-do application is to serve football managers who manage visiting trips for their teams. It has the following features:
- User accounts: Allow users to login into the application with their credentials as well as ability to create new user accounts for their appropriate role.
- Trip plan management: Allow users to create plans and manage them. They can do
the following:
- To-do list: Create tasks, assign them to users if desired and complete them.
- Trip plan details: enter context around the trip including dates of travelling and an opposition team to play against.
- Player list: Manage a list of players
- Trip plan management: Create trip plans and invite other users to manage them. Also, amend their information and ability to delete them.
- To-do list feature: Add tasks for different users to perform. It allows users to assign users, set dates and set a 'completed' status.
- Search for plans: A search bar to look for plans by looking a particular football player or an opposition team.
Note: the application is available on http://localhost:3000 after launching it in one of three ways.
It's possible to launch the project via Docker Compose.
docker compose up
This will pull pre-built images from a personal repository.
A below command will built an image from scratch as well as proper docker tags to mongodb database.
docker compose -f transparent_compose.yaml up
Follow installation instructions for Vagrant and then run vagrant up
inside the root of the project (it will take approximately 5 mins to set it all up). Then go to http://localhost:3000 to access login page.
# Start to be in a project root directory to install node dependencies
npm install
# Then move to Vue folder to install dependencies and build the front-end
cd vue-ui
npm install
npm run build
cd ..
# Open a new tab in your terminal (so you *might* end up in the same
# directory project root) to set up mongo
mkdir data
mongod --dbpath=data
# Then restore the data to the database
mongorestore -d tripdb mongo_backup/initial_backup/tripdb
# Then start the server!
npm start
You should be able to access the site on http://localhost:3000
by clicking here
To login, use credentials of username pav
with password pav
. This is one of
the accounts in the application and it has some trips to look at.
The first page shows a list of trip plans. Notice two separate lists of My Plans
and Shared Plans
. These show trips that are created and owned by the
user and trips that invited the user to be part of, respectively.
There's a button to add a new trip plan. Do note that it's not possible to invite other users at that page, but they can be invited after the trip plan has been created.
Press 'Go' on one of the trips that the user owns. A page displays various pieces of information for the trip and allows users to edit two lists:
- the to-do list: Manage a list of tasks
- the player list: assign football players to a specific trip
- In order to see selectable players, type in anything in the search bar and then clear it. A pop up list should appear displaying the players.
There's a "Edit" button that allows editing the trip plan including assigning other users who can work with the plan. To see assignable users, perform the same above trick related to the search box.
Trip plans are searchable via the Search page. Click on the "Search" at top of the page. Trips can be search by assigned players or specified opposition teams. It is possible to specify a date range search criteria by toggling "Date Range" checkbox and edit date boxes.
- Node version: 8.9.4
- mongodb version: 3.6.2
vuex - a state management pattern and library
Element - a desktop UI Library
moment.js - a library for manipulating time formats
vue-resource - a library to perform http requests inside vue
jsonschema - a library to validate JSON schema