/Layout_Web_Assessment

Resizable react components

Primary LanguageJavaScript

ABOUT PROJECT

Web_Assessment_via_Precily

Live Dummy Application

Images:

final_gif

image

  • Resizable Components built using React.
  • Dockerized and supported with git actions. (!working)
Stats:

Total time spent: 
15-17hrs ==> Includes Planning, Research, Build, Documenting(readme), Debugging.

Packages used:

  • CRA template(OSS)
  • Bootstrap(OSS
  • Docker(OSS)
  • Rapid_API(freemium)

Platform used:

  • Github: git actions for containerized scripts.
  • Stackblitz: For hosting MVP plain frontend.

Task_1: Part-A

  • [✔️] It consists of three different components with some content (feel free to add any HTML content or Images).
  • [✔️] User Should be able to Re-size the components by dragging them from any of the sides. Interesting learn.

Draggable support using CSS resize property. Alternatives: React-grid-layout, React-rnd, React-resize-panel

  • [✔️] The neighbour components should expand or shrink based on re-sizing operations performed on target component.
  • [✔️ ] Layout should be responsive on all laptop devices.
  • [✔️] The code should be clean and of production quality. (good enough)

Task_1: Part-B

  • [✔️] Containerize the Web Application You Developed using Docker. (did partially)

Docker didn't worked out due to low end laptop[Penitum processor with windows 8.1] and VM problems. Scripts added though. Required docker build during development.

  • [✔️] Construct a Well Defined Docker file including ENV, RUN, CMD Commands.
  • [✔️] Deploy the Container using any CI tool like Jenkins, or Git Actions etc.
  • [ ]Deploy on Heroku.

Not performed. More on Heroku dynos

xtras [WORKING [✔️]]

  • [ ]Real Time Monitoring of the Deployed Application.
  • [ ]Any Approach to Ship the logs of Hosted Application to any remote storage.

Task_2: Part-A

Create APIs for the front end you have created in the previous task. API to add/edit in these components.

There should be two button:-

  • [✔️] Add: On clicking Add button, if there is any data it should get clear and user should be able to add new data.(It will create new entry in the table)

  • [✔️] Update: On clicking this button user should be able to update the data. (It will update entries in the table)

  • [✔️] Count: API to show number of times(count), user has called ADD and Update API.

Task_2: Part-B

  • [✔️] Provide Automation in your CI/CD Pipeline that you push the new API Changes and job gets triggered to deploy the new feature
  • [✔️] Attach the screenshot of scripts used and pipeline execution.

Pipeline and CI/CD ss added. Failed due to non-dockerized build.

image

image

  • [] Test the Deployed APIs using any API Testing tool e.g. Postman

RAPID_API_Platoform_issues | didn't got subscribed to endpoints.

Things to consider:

  • [✔️] Clean code with proper commenting.

Semantic commits and code forma using prettier.

  • [✔️] Mention the execution time for each API image

ACKNOWLEDGEMENTS

  • Good learning experience.