Scribd
Upload
48 views4 pages

Ready Exercise 1.0.6

The document describes a week view calendar app that integrates with Google Calendar. It provides specifications for the app, including logging in with Google, displaying a grid view of the current week with hourly slots and events, listing available calendars on the left side, and allowing the user to toggle which calendars are displayed. It also notes requirements like replicating a screenshot design, supporting modern browsers, and submitting the code for assessment of architecture, commits, setup instructions, functionality, and tests.

Uploaded by

AK Nwosu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
48 views4 pages

Ready Exercise 1.0.6

The document describes a week view calendar app that integrates with Google Calendar. It provides specifications for the app, including logging in with Google, displaying a grid view of the current week with hourly slots and events, listing available calendars on the left side, and allowing the user to toggle which calendars are displayed. It also notes requirements like replicating a screenshot design, supporting modern browsers, and submitting the code for assessment of architecture, commits, setup instructions, functionality, and tests.

Uploaded by

AK Nwosu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Ready Exercise

Create a Week View app using React that integrates with Google Calendar

Specifications
Prompt user to login with their Google account (see associated code snippets
from the Google Calendar quickstart guide - feel free to just copy and paste
them)

After enabling the Google API and creating an API key, remember to authorize
your local server as a JavaScript origin (for example http://localhost:3000 ).
Visit the Credentials tab then click on your newly created client ID under the
"OAuth 2.0 Client IDs" heading. Add your local server URI under the
"Authorized JavaScript origins" heading

Ready Exercise 1
Display a static view of the current week showing the 7 days of the week on
the x-axis, and 24 hours of the day on the y-axis (see screenshot for details)

The week view should show a grid of 1 hour slots (as seen in the screenshot)

List available calendars associated with the google account on the left side

Display events for the current week inside the view with blocks representing
their duration, include the event's title, start time, and end time

Allow the user to toggle calendars from the calendar list on the left, toggling
a calendar on will show related events, and toggling it off will hide related
events. You can toggle multiple calendars at the same time

Fixed week days header with scrollable hours grid

Current day is indicated with a circle around the date

Current month and year are displayed in the view header

Try to replicate the screenshot as closely as possible

Provide clear instructions on how to run this locally with our own google
account

Attach a technical design document describing the architecture of your


application and the rationale behind any decisions taken

Notes
Third-party libraries are allowed

You only need to support the latest version of a modern browser Chrome,
Firefox, etc.)

The calendars and events shown in the screenshot are for demonstration
purposes (you'll notice the hours listed for the events are inaccurate as well),
we expect the app to fetch the calendars and events associated with the
google account

The app is not expected to do live event updates. Meaning it only cares about
the events present at the time of initializing the application

Ready Exercise 2
The app is not expected to navigate between weeks, we only care about the
current week at the time of initialization

If you use a public repository for your code submission, please do not title it
"Ready" or "Ready Calendar", instead give it a fun secret name to make it hard
to search for in the future

If you find that you're getting stuck on something, or have any questions,
please feel free to reach out by email

You can add Yazan on Github if you want feedback along the way or have
questions

Submission
Send us a link to a git repository with instructions on how to run your application
locally, or a zip file with submission contents (please include the .git directory so
we can see your commits). Please add Yazan so we can view your repository.

Assessment
Gradual progression through commits (and meaningful commit messages)

Ease of setup with clear instructions

Application working according to specifications

Functional build system and configuration

Separation of concerns within application

State management and transformation

Data structures used with clear relationship between them

Performance (load times/requests/rendering)

Meaningful tests with good coverage

Appropriate styling and UI behavior

Links

Ready Exercise 3
https://developers.google.com/calendar/quickstart/js
https://developers.google.com/calendar/v3/reference

https://github.com/google/google-api-javascript-
client/blob/master/docs/reference.md
https://fonts.google.com/specimen/Roboto

Ready Exercise 4

You might also like