/article-web-app

Primary LanguageTypeScript

Project's details

Objective

To demonstrate the candidate’s front-end development skills by creating a web application to manage articles creation and manipulation. Features & Functionalities

  • Implement signup/registration functionality by capturing the following user details: First Name, Last Name, Username (Email) and Password.
  • Implement login functionality.
  • Only authenticated users should access the system.
  • Provide ability to list all existing articles.
  • Provide ability to add new article with the following details (using form):
    1. Title.
    2. Content.
    3. Date.
    4. Image:
    5. Allow user to select an image file from local disk and display image preview in the form.
    6. Image should be stored as Base64.
    7. Image size : 4 MBs (max).
  • Provide ability to edit/delete existing articles.

Notes

  • Use React.Js.
  • Use Redux.
  • The project should be runnable.
  • Use the browser’s storage as the database for user registration, articles details, images ... etc.
  • Implementation of unit tests is required.
  • No 3rd party library allowed to be used to select the image and collect its metadata.
  • Text editor should be used to fill article’s content. Use any editor of your choice.
  • Upload the project source code to GitHub and share the link once completed.

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn run test:watch

Inorder to run the test, you can use this command

Used Technologies

React

Typescript

Redux

In order to handle global states

Redux Toolkit

In order to efficient Redux development

React Hook form

In order to handle forms

Ant design

In order to developing User Interface

Draft js

In order to handle text editor

Yup

In order to validating schemas

React router dom

In order to handle website's routings