Project Links

Frontend: https://openfabric-test-angular.vercel.app
Backend: https://openfabric-test-angular-production.up.railway.app/

Fullstack Junior Developer (Intern) Test

Welcome! and thank you for applying!

Constraints and restrictions

You are free to use any package or library you see feet as long as you follow these rules:

• 👎 You can't copy and paste from other peoples work

Submission

Your solution must be uploaded on GitHub, and submit us the link in max 1 week after receiving the task.

Note

Keep in mind that this is the project that will be used to evaluate your skills. So we do expect you to make sure that the app is fully functional and doesn't have any obvious missing pieces.

Part 1: Angular (Front-end)

1.1 Create a simple Angular application

Objective: Assess the candidate's familiarity with the Angular framework and CLI. Task: Create an Angular application with a responsive layout using Angular Material or Bootstrap.

1.2 Components, Services, and Routing

Objective: Evaluate the candidate's understanding of Angular components, services, and routing.

Task: Create an application that displays a list of products, allows adding new products, and provides a detail view for each product.

Use components to separate concerns. Create a service to manage data communication. Implement routing to navigate between components.

1.3 Reactive Forms

Objective: Test the candidate's ability to work with reactive forms in Angular. Task: Implement a form to add and edit product details, validating user input and displaying appropriate error messages.

Part 2: Back-end (Node.js/Express)

2.1 Create a simple API

Objective: Evaluate the candidate's experience with Node.js and Express. Task: Develop a RESTful API with Express that supports CRUD operations for the product list.

2.2 Middleware and Authentication

Objective: Test the candidate's understanding of middleware and authentication in Express. Task: Implement JWT-based authentication for the API and protect specific routes.

Part 3: Database

3.1 Data modeling and CRUD operations

Objective: Assess the candidate's ability to work with databases. Task: Choose a database (e.g., MongoDB, PostgreSQL, MySQL), design a schema for the product list, and implement CRUD operations.

3.2 Data validation

Objective: Test the candidate's ability to validate data at the database level. Task: Add server-side validation for product details and handle errors appropriately.

Part 4: Integration

4.1 Connect front-end and back-end

Objective: Evaluate the candidate's ability to integrate the Angular application with the back-end API.

Task: Connect the Angular application with the Express API to create a full-stack application.

4.2 Deployment

Objective: Test the candidate's knowledge of deploying a full-stack Angular application. Task: Provide instructions or deploy the full-stack application to a platform like Heroku, AWS, or Google Cloud Platform.

This test will provide a comprehensive assessment of an Angular Full Stack Developer's skills, covering various aspects of front-end and back-end development, as well as database and deployment knowledge.

Solution

Getting Started

Navigate to directory on your machine:

cd folder/to/clone-into/

Clone repository:

git clone https://github.com/Onyelaudochukwuka/openfabric-test-angular

change directory to the frontend folder:

cd openfabric-test-angular/frontend

Install all dependencies:

npm i
# or
yarn install

run the development server:

npm run start
# or
yarn start
# or
pnpm install

change directory to the backend folder:

cd openfabric-test-angular/backend

Install all dependencies:

npm i
# or
yarn install
# or
pnpm install

run the development server:

npm run start
# or
yarn start
# or
pnpm start

Project Structure

         ...
          |   
   ------   --------   
   |                |
   |                |         
frontend          backend     
   |                |         
   |                |              
  src              src
   |                |       
   |                |   
  app             serve.ts
   |                |   
   |                |
   atom         services
   |                |
   |                |
  utils            models
   |                |
   |                |
  molecule       routes
   |                |
   |                |
   |----------------|
           |
           |
       Application

Technologies Used

• Angular
• ExpressJs

Author

Onyela Udochukwuka

License

This project is licensed under the MIT License - see the LICENSE.md file for details