👩‍💻 Single Page Aplication - Svelte

Netlify link: SPA

📓 About

🚀 This project is a single page application following the requirements and business rules proposed in technical challenge

📋 Requirements

The SPA must have:

• A form (F1) with the following structure:

  • File input that accepts only files in the format ".json" and labeled "File"
  • Button labeled "Import"

• Contains a second form (F2) with the following structure:

  • Text input with 1 to 20 characters and labeled "Extension"
  • Text input for integer numbers that range from 0 to 9999 and labeled "Count"
  • Text input for decimal numbers that range from 0 to 1000000 and labeled "Filesize"
  • Button labeled "Add"

• Contains a table (T1) with the following columns:

  • "Extension", "Count", "Filesize", "Action"

💼 Business rules

• The form F1 should accept json files with the following structure:

  [
    {
        "extension": "java",
        "count": 5000,
        "filesize": 360
    },
    {
        "extension": "xml",
        "count": 3,
        "filesize": 45.54
    },
    {
        "extension": "xml",
        "count": 14,
        "filesize": 45
    },
  ...
  ]
  

• Once a valid file is selected and the user clicks on the button "Import", all the valid objects within the file should be added to the table "T1"

• Once all fields in the form F2 are filled as valid and the user clicks on the button "Add", the valid object should also be added to the table "T1"

• For each row, the "Action" should have an option link labeled "Delete" that, once clicked, will remove the corresponding row

• The field "Extension" shall be unique, therefore only one row should be displayed on T1 for each extension type

• Try to map as many error cases as possible within the SPA and display them for the user in a friendly manner

✔️ Opcionals done

• Add an "Edit" link as an "Action" that allows the user to update any specific input within T1
• Make usage of TypeScript on the implementation of the solution
• Publish a Docker image with your application (including its dependencies) in a registry like Docker Hub
• Create a README file or page on how to use your SPA
• Deploy your solution to a cloud provider like Amazon AWS or Heroku

🚧 Backlog

Opcional tasks not done:

• Add a pagination feature to table T1.
• Make the buttons "Add" and "Import" send a Post request to a Rest API (URL provided by a given environment variable)
• Create one ore more automated tests using a plugin of your choosing

🏃‍♀️ Run application

1 - Clone this repository:

git clone https://github.com/adriatls/SPA-Svelte.git

2 - Install dependencies:

npm install

3 - Run the application:

npm run dev

🐋♀️ Docker

1 - Pull my container from Docker Hub:

docker pull adriatls/adria-spa-web:latest

2 - Run the container:

docker run -d -p 3000:3000 adriatls/adria-spa-web

3 - In your browser: http://localhost:3000/

If you do not want to pull, it is possible to build and run the container locally

1 - Run the comand:

docker compose up -d --build --force-recreate

2 - In your browser: http://localhost:3000/

💻 Preview

Back to the top