Project Exam 2

There are two options with this Project Exam. You need to only choose one and please follow the deliveries carefully.

Goal

To take the skills learned over the last two years and take on an extensive project where the finished product should reflect the candidate's general development capabilities, in addition to visual and technical skills.

Brief

For this assignment you have the choice between getting a real world client that you will manage and build a website for, or a case study to make a hotel booking website.

Whatever project you choose, the final submission must have the following:

• A Gantt chart planning the project
• A style guide
• An Adobe XD prototype
• Use a CSS Pre-processor and BEM if not using CSS Modules, Styled Components, etc
• Use a React.js or Next.js
• You can use regular JS or TypeScript
• Please use create-react-app or create-next-app to generate a skeleton project for yourself
• A fully working website that fulfils the brief

Option 1: Real World Client

Make a website or application for a real world client. The project should offer a significant enough scope to be able to show off your skills as a developer, and hopefully the project can form a central part of your portfolio for when you start applying for jobs.

The process followed for the project will differ depending on the client and the requirements of their project.

Note: The project has to have a big enough scope to show off the skills learned over your studies. An example of the level we’re expecting would be a website where administrators can add, update, remove products, and users can search, filter, and contact administrators. If you are unsure if your potential client’s brief is strong enough for the Project Exam 2, please message your tutors. Use of a JavaScript Framework is a requirement.

Recommended Process

Week 1 to 3: Finding client, Planning and Design Week 4 to 6: Coding Week 7: Bug Fixing

Level 1 Process

• Use your networks and connections to find a client that needs a website or application built.
• Understand their requirements and come up with a functional specification for the project. You can write the functional specification using “System shall” statements. For example, “The system shall allow visitors to search for an article”
• Create a Gantt chart for the project, planning out your deliverables for the client.
• Make a design style guide and then take this style guide and create an Adobe XD prototype. Present to the client for feedback.
• Develop the site ensuring you deliver all that is listed in your functional specification.
• Test the website on various platforms and browsers. Ensure the site is bug-free and working before presenting to the client.
• Go through a final round of changes before going live with the website.
• Write a report on your process and decisions for the project. Please use the report template provided.

Submission

End of week 3: Functional specification, Gantt chart, style guide, and Adobe XD prototype End of week 7: Report with link to website, and all files in a compressed ZIP

Option 2: Hotel Booking Website

A local tourism agency in Bergen is launching a new website called ‘Holidaze’ for visitors to the area to be able to find hotels, B&Bs and guesthouses, and for the accommodation owners to receive enquiries.

The project requires you to create the visitor side of the website where users can search accommodation and make enquiries, as well as the administration side where properties can be added and enquiries managed.

You will need to create an API to store the data for the establishments, enquiries and contact submissions. You can choose to use WordPress or Strapi as a Headless CMS, but it is very important that the API is deployed and publicly available. Please do not submit any files for your API. Only submit the website you have created.

Requirements for the Website

Visitor Side

• Homepage
• Search bar typeahead (auto dropdown with hotel names that match what has been typed)
• A results page with all hotels
• The hotel specific page which displays all details about the hotel
• An enquiry page either modal or separate page
• A contact page (different to enquiry page) which goes to the admin for Holidaze

Admin side

• Create a login section that makes use of JWT tokens
• List of enquiries and new enquiries appear when user submits the form on the enquiry page
• List of messages from contact form
• The admin can create a new establishment

Recommended Process

Week 1 and 2: Planning and Design Week 3 to 6: Coding Week 7: Bug Fixing

Level 1 Process

• Start by planning out the project.
• Next begin your research of likely users and browse competitor websites for ideas.
• Create a style guide
• Build an Adobe XD prototype (or you can use Sketch or Figma).
• Start coding.
• Once you’ve finished development, start looking for bugs and ensure the site functions well on all viewports. Test the code on different devices. Because your API is public, the code shouldn’t rely on a local API.
• Refactor your code.
• Ask another student to look over your code and ask them if they can see how it might be better implemented. This is important to get an outside view on your code. Please attach this feedback to your report.

Submission

End of week 7: Report with link to website or a Github link and feedback from code review, and all files in a compressed ZIP

Resources

Report template included in the repo.