Scribd
Upload
29 views

Assessment ToDoList - Jr. Front End Developer

Uploaded by

nagusurushe1
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
29 views

Assessment ToDoList - Jr. Front End Developer

Uploaded by

nagusurushe1
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/ 8

Frontend Assessment Document

SINCE 2002

To-D
o L i st A p p

Page | 1 of 8
Contents
Front End .................................................................................................................................... 3
Best Practices, Tools, and Technologies .................................................................................... 3
Declarations ........................................................................................................................... 3
Naming Conventions .............................................................................................................. 3
Use of Version Control ........................................................................................................... 3
Unit Tests................................................................................................................................ 4
UI Unit Tests ........................................................................................................................... 4
Other Tools And Technologies To Use ................................................................................... 5
Assessment – To-Do List Application ......................................................................................... 6
Problem Statement ................................................................................................................ 6
Set-up Requirements ............................................................................................................. 6
Functionality ........................................................................................................................... 6
Wireframes ............................................................................................................................. 6

Page | 2 of 8
Front End Developer
Angular/React - Often referred to as the “front end"; a client-side JavaScript framework used
to create dynamic web applications to work with interactive user interfaces.
The assessment is to be implemented using Front End technologies.

Best Practices, Tools, and Technologies


While implementing the assessment make sure that the best practices are followed. Best
practices ensure quality end-product with enhanced code readability that helps easy code
maintenance. When best practices are followed one can ensure timely delivery of services,
products, and support.

Declarations
All the declarations at the beginning of program
o Single place to look for declarations
o Reduced possibility of unwanted re-declarations

Naming Conventions
Naming conventions are fundamental as it helps to maintain code consistency that makes
the code readable and easy to understand. While developing the application follow the
standard conventions as mentioned below.
o camelCase is used for variable & function names (var lastName)
o camelCase is used for filenames
o Modules, variable names always start with a letter (var firstName)
o Give spaces around operator (var sum = no1 + no2)
o Encourage code readability by using appropriate indentation
o Global variables & constants should be written in UPPERCASE
o Use proper comments (//) to enhance code readability
o Choose meaningful names while naming file, folders, variables, methods
o Use conventional (Angular) suffix for files - .component.ts, .directive.ts,
.module.ts, .pipe.ts or .service.ts
o For further naming conventions refer
o https://angular.io/guide/styleguide

Use of Version Control


o Version control helps in reverting back to changes in-case of accidental
changes. In this assessment make use of version control in order to store,
manage the code.
o The platform which would be used for version control would be @GitLab.
GitLab is similar to GitHub that offers more features.

Page | 3 of 8
o Ensure that you have GitLab account. Further create a GitLab repo that has
access to required members.
o While creating a GitLab repo, ensure naming convention as follows,

“ng-training-”(followed by assignment name)


Example: ng-training-assignment -1
o Make sure all the changes are committed to the repo.
o Once assessment implementation is complete do share the GitLab link on
the company’s official mail-id (through which you have received the
assessment details).
• Implement the Folder Structure systematically.
• Follow Modular approach.
o Avoid one single file having more than 600 lines of code.
o Create Separate Folders/Files.
o Encourage loosely coupled approach.
• Throughout the whole application follow a Consistent Pattern.
o File/Folders Naming.
o Components/Modules/Directives/Services Naming.

Unit Tests
It is an integral and mandatory process during assessment development that essential unit
tests are written and verified. Do follow the link below for unit test reference. Use Mocha
for writing the unit tests.
https://mochajs.org/#:~:text=Mocha%20is%20a%20feature%2Drich,to%20the%20correct%2
0test%20cases.

UI Unit Tests
It is an integral and mandatory process during assessment development that essential user
interface unit tests are written and verified. Do follow the link below for UI unit test
reference.
https://docs.angular.lat/guide/testing

Page | 4 of 8
Other Tools And Technologies To Use
• In assessment implementation use SLDS and CSS libraries. Refer below for the same.
o https://www.npmjs.com/package/@salesforce-ux/design-system
o https://www.lightningdesignsystem.com/

Note: If you're not familiar with this library, you can use other libraries, but having
experience with SLDS is beneficial.

Page | 5 of 8
Assessment – To-Do List Application
Problem Statement
Develop a To-Do list application where users can create, read, update, delete the tasks user
want to maintain on To-do work list.

Set-up Requirements
• Client-side And UI
▪ Framework
Use Angular/React to build the frontend.
▪ Components
1. Task List Component - displays the list of tasks.
2. Task Form Component - A form to create and update tasks.
▪ Services
1. Task Service - Handle API calls to the backend.

Functionality
• Process and Tasks
1. Add task - allow users to add a new task .
2. View task – Display and navigate the task list.
3. Edit task – allow user to update existing task.
4. Delete task – allow user to delete task.

• UI/UX
UI should be user friendly and easy to navigate.
Ensure responsive UI design for both desktop and mobile views.

Write the appropriate test cases and test the implementation accordingly.
For client-side use Angular/React default UI unit tests libraries.

Wireframes
Please find below the assessment wireframes. Note and follow the minute UI details as
mentioned in the wireframes. Implement the UI accordingly.

Page | 6 of 8
Screen 1

Screen 2

Page | 7 of 8
Screen 3

Screen 4

Page | 8 of 8

You might also like