thevinayysharma / Layout_Web_Assessment

Resizable react components

ABOUT PROJECT

Web_Assessment_via_Precily

Live Dummy Application

Images:

• 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.

• [] 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

ACKNOWLEDGEMENTS

• Good learning experience.