xhibit

GA Project 3

Team of 2

This was the third project during my time on the Web Development Immersive course (12 weeks of full-time) at General Assembly. The project took place in the week 9.

Note

The app is not yet fully responsive. For best experience open on the laptop.
The landing page may take longer than the average page load time.

Course Curriculum :

Week 7-8 | Module Three

AngularJS
Token Authentication & Session Authentication
Third-party APIs
Mocha and Chai

Full curriculum available at the bottom of the page.

Brief

The course instructors had partnered students with other classmates to design and collaboratively build a MEAN (MongoDB, Express, AngularJS, Node.js) stack app of their own design.

Server side

Use Mongo, Node & Express to build a server-side API
API must have at least 2 related models, one of which should be a user
API should include all RESTFUL actions for at least one of those models.
Include authentication to restrict access to appropriate users
Include at least one referenced or embedded sub-document
Include automated tests

Client side

Use AngularJS
Use SCSS
Use Webpack & Yarn to manage your dependencies and compile your source code

Timeframe : 1 week (November 2018)

Concept

xhibit allows users to search the current art exhibitions in the world. The exhibitions are also searchable by galleries, all are displayable on the map. The application was built using the MEAN stack: MongoDB, Express.js, AngularJS, and Node.js Token and session authentication, OpenStreetMap with Leaflet used.

Goal

Enhanced manpower, 7 days to plan and build. My list of priorities:

Fulfill the brief: There were more requirements than the previous projects.
Time management: MVP focused project management. The team agreed it is important to track time and keep an eye on our progress. We did daily morning stand-ups and Git version control.
Team work: The team decided to use Trello to assign tasks and track the progress.
Stress control: Get everything ready to present by Day 6.

Visuals

All features

User can access to

Home page: Map interaction, Featured exhibitions filtered by top rated.
Exhibition index, show. And comments.
Gallery index, show.
Register

Registered user can

Log in and out
Create gallery page
Write exhibition review thorough gallery page
Make comment on the exhibition review show page
Bookmark the exhibition review
View all bookmarks in user profile page

Home

Exhibitions

Galleries and User Profile

Project Log

Approach

Time	Action
Thursday ( half day )	Project concept, code planning, wireframe
Sunday, Monday, Tuesday ( 3 days)	Server side work. Initial front end set up.
Tuesday, Wednesday (1.5 days)	Client side work. Style / Scss.
Monday, Thursday (1.5 days)	Extra features, Bug fixing, Testing, Git, Deployment

Each team member was assigned a model and routes to create to start from. I was in charge of the Gallery model and routes. When the initial setups were done, the members were free to handle more tasks based on the project management plan on Trello.

Challenges

Within a sprint of seven days, and in a team of two, we created xhibit during week 9 of the course. This was the first team project and we found a common interest in art and both members had the same goals to achieve.

Teamwork and time management

Face to face communication.

Daily morning stand-up.

Co-located work base and mobile flexibility. (Trello and Slack communication)

Status report through Slack.

Fill each other’s water cups.

Stress control

High fives on wins.

Stick to the big plan but also be flexible.

Good rest. No late nights.

Lessons learned

Set Sass rules at the start of the project to organise code better. Aim a tad higher. Could add more features.

Bugs / Moving Forward

Flash message weirdness on Login page.
Hide bookmark when user is not logged in.
Flash message to login for benefits.
Create user class to classify an authorise reviewer and a regular user.
Mobile responsive.
Any logged in user can edit and delete post.

Technologies Used

Category	List
Languages	JavaScript (ECMAScript6), CSS3, Sass, HTML5
Front-end Web Application Framework	AngularJS
Server Environment	Node.js with Express.js
CSS Framework	Bulma
Third-party APIs	OpenStreetMap with Leaflet
Project Collaboration Tool	Trello, Slack
REST client	Insomnia
Typefaces	Google Fonts
Text Editor	Atom
Browser	Chrome
Version control	Git and GitHub

License

MIT license

Course Curriculum

Please see below for the details of my training and links to more projects.

Week 1-3 | Module One

HTML5
CSS3 and CSS Animation
Sass
JavaScript
jQuery

Week 4

Project 1 : Iguana vs Snakes | GitHub | Play Link

Week 5 | Module Two

Node.js
Express.js
EJS
MongoDB
User Authentication

Week 6

Project 2 : hungry korilla | GitHub | Heroku