# Frontend, Fullstack & UI/UX
Interns
---
- Mcvean Soans
- Pratik Vartak
- Raj Tiwari
- Name
Work 1: Project Table UI (Feature/s)
------
Author: Mcvean Soans
Description:
- The Edit and Delete icons from the Project Table replaced by an **Actions icon** (providing Edit and Delete functionality).
- On hover, the Table Row is **highlighted**.
- On click, the Table Row **redirects to the respective project page** (`/step-2`).
- **Project Description** field added in FrontEndApp (project table) and BackEndApp (`v1/views.py`).
Blockers:
- None
Key Takeaways:
- Familiarized Application Structure for the FrontEndApp - Project Table.
Screenshots:
- Highlighted Table Row on Hover
- Options for Individual Projects
Work 2: Clone Projects (Feature)
------
Author: Mcvean Soans
Description:
- Project Clone functionality added to Actions.
- The cloned project may have a new name, output file name, and project description along with capabilities for cloning the Model Layers, Preprocessing Parameterss and Hyperparameters as per the owner's choice.
- Project Clone modal facilitates the two steps:
- Step 1 - Adding details for the new clone
- Step 2 - Selecting the features required to be cloned into a new project
Blockers:
- Faced trouble understanding the BackEndApp functionality for the step-2 part of the application (get and save methods for layers and parameters of the app).
Key Takeaways:
- Familiarized Application Structure for BackEndApp - `v1/views.py`.
Screenshots:
Work 3: Correct Project Deletion (Bug)
------
Author: Mcvean Soans
Description:
- While clicking the Delete Project button in the Actions menu, only the last project would be deleted.
- The expected behavior is that the correct project should be deleted upon clicking the Delete button present in the Actions menu of the project.
Blockers:
- Only the last project in the Project Table was stored in the current State of the FrontEndApp.
Work 4: Slice Project Description (Feature)
------
Author: Mcvean Soans
Description:
- The Project Description field should be sliced if the number of characters in the description exceeds 40.
Blockers:
- None
Screenshot:
Work 5: Refactor Step2.js (Feature)
------
Author: Mcvean Soans
Description:
- **Separated the code for the 3 tabs** (Preprocessing parameters, Model Layers & Hyperparameters) into 3 different components / files for improved usability.
- Formatted Step2.js slightly to increase readability.
- Fixed a syntax error in the `temp_*` object creations using `project_details`.
Blockers:
- Highly complex and overlapped use of the state in the `step-2` of FrontEndApp.
Work 6: Conditional Clone Project (Feature)
------
Author: Mcvean Soans
Description:
- A Project will only be cloned if a checkbox in the Clone Project Modal (Preprocessing params / Model Layers / Hyperparams) is selected.
- If no new details are entered by the user in Step 1 of the Clone Project Modal for the new project to be cloned, the pre-existing values of the project details will be used.
- The project name for the new clone, will have "Clone" appended to the previous name.
- In addition, fixed a `useState` bug in `Step2.js`.
Blockers:
- None
Work 7: SSL Certificate Login / Register Issue (Bug)
------
Author: Mcvean Soans
Description:
- The BackEndApp did not allow Login / Registration for users (only in some cases).
- Fixed the Login / Register Issue created due to SSL certificate errors.
Blockers:
- For every Login / Register request to the BackEndApp, the Server threw SSL certificate errors while connecting to MongoDB using the `pymongo` client.
Key Takeaways:
- StackOverflow is a really helpful platform xD.
- Familiarized Application Structure for BackEndApp - `authv1/`.
Work 8: Unit Tests for Project Table (Feature)
------
Author: Mcvean Soans
Description:
- Implemented unit tests for the `ProjectTable.js` component.
- The project details including the project name, language used, library used, task, description and output file name, rendered on the Dashboard (Project Table), by the data sent from the Backend API is verified (as visible to the user).
- Mock functions and mock projects created to **isolate the testing only to the FrontEndApp** / React-side of the app (not making any axios requests to the BackEndApp).
Blockers:
- New to Testing (Never practically implemented tests before).
- Had to learn testing for FrontEndApp using **React Testing Library** (RTL).
Key Takeaways:
- Able to successfully write **unit and integration tests** for React-based app using RTL.
Resources:
- [**React Testing Library Tutorial**](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gm4_-5UsNmLqMosM-dzuvQ) by The Net Ninja.
Work 9: CRUD Testing - Read Projects (Feature)
------
Author: Mcvean Soans
Description:
- Isolated testing to the FrontEndApp (tests do not verify the correctness of the Backend APIs).
- Prevented mocking axios requests in order to **test like an actual user**, as well as reduce requests cost to the server.
- **Configured Mock Service Worker** (MSW) to intervene axios requests.
- **Created dedicated handlers and resolvers** for the "**Read Projects**" part of the CRUD operations.
> Updated `package.json` -> Added `msw` as a development dependency
Blockers:
- Needed a better way to test like an actual user, rather than mocking requests while testing.
Key Takeaways:
- Able to successfully **configure and run MSW**, as well as **create handlers and resolvers for the required urls** while testing in React-based apps.
Resources:
- [**Mock Service Worker Docs**](https://mswjs.io/docs/)
Work 10: Logging Config fix for Local Dev Environment (Bug)
------
Author: Mcvean Soans
Description:
- BackEndApp prevented from starting due to the incorrect logging configuration.
- Altered `requirements.txt` to include the correct python logging package - `colorlog`.
Blockers:
- Had to debug the logging code in BackEndApp to isolate the bug causing the error.
Key Takeaways:
- Able to successfully read and possibly write logging configurations for Python dev environments.
Work 11: Tests for Create / Edit Modals (Feature)
------
Author: Mcvean Soans
Description:
- **Refactored the FrontEnd UI** (project modals - create / edit & clone) **and Logic** (create / edit & clone operations) to facilitate simplified testing.
- Implemented tests to verify the **correct rendering** of the Create and Edit Project modals (and **functionality of the forms within**).
Blockers:
- Started off with writing tests for the Create and Edit Projects part of the CRUD of the app, but the UI and logic parts for the FrontEndApp were **highly overlapped**, rather than being isolated in different components.
- Could not get a specific component to render and function independently, **without having to render other components as well**.
Key Takeaways:
- Separated the UI part of the FrontEndApp (Create / Edit and Clone Project Modals) into separate functional components.
- Separated the Logic used in the FrontEndApp (creating, editing and cloning operations) into separate functional components.
Work 12: Tests for Create, Edit & Delete Projects (Feature)
------
Author: Mcvean Soans
Description:
- **Tests catering towards the CRUD** of the `FrontEndApp` (particularly Create, Edit and Delete projects) have been implemented.
- Appropriate handlers and resolvers for the API calls to `BackEndApp` have been created in the `src/mocks` directory.
- Relocated the `handleDeleteYes()` function into `MainApp/operations` directory (part of the Separation of UI & logic of the Frontend).
- Altered mocked function names in tests by appending the mocked- prefix. (eg: `setOpen` -> `mockedSetOpen`).
Blockers:
- Could not make API calls by simply firing a button, as the status of the API calls (although mocked using `msw`) would be unkown. For eg: Triggering a create project request by firing a button click event would give us a response back, but we could not access the response status / message / etc (even though everything is sent by an apt `resolver`).
- Rendering multiple components was not an option to test the integration between them, as the logic (functions / props) is passed through several components of the UI.
Key Takeaways:
- Usage of a mock function and the assertion `toHaveBeenCalledTimes()` for the said mock, was crucial to mimic the behavior of triggering an API request (creating the appropriate request for create, edit and delete).
Work 13: Flask App Deployment (Feature)
------
Author: Mcvean Soans
Description:
- New project action added, facilitating the deployment feature.
- Three Deployment categories implemented:
1. **Local**: User chooses Data Directory (for model categories), followed by choosing type of download^ (executable / zipped).
2. **Cloud**: User chooses Data Directory (for model categories), followed by uploading pickle file of the model to be deployed on any preferred cloud platform.
3. **Hybrid**: Includes functionality of **both** Local & Cloud deployment options.
- Frontend deployment modal conditionally renders steps for deployment, depending on user's choice of the Type of Deployment (**Local** / **Cloud** / **Hybrid**).
- Backend routes and views for all three deployment categories catered to, having **created a new Django app for Deployments**.
- Implemented **custom chunking** to facilitate large file uploads to Backend. Once, Pickle file is completely uploaded, it is stored within cloned Flask repo as `model.pkl` with the path correctly set within `app.py` of the repo.
- The model categories within the cloned repo is also set depending on the user's choice of Data Directory.
- `GitPython (3.1.18)` added to `requirements.txt`.
- Added GitHub urls for flask repo (HTTPS & SSH) to `.env`.
**Note -**
- The Data Directory chosen by user must contain subdirectories `train` and `test`, each containing the data within subfolders (names of which are taken to be the model categories for the flask app).
Example Data Directory Structure:
```
├── Data
├── train
├── cats
├── dogs
├── test
├── cats
├── dogs
```
Model Categories selected: `cats` and `dogs`
- For local deploys, only **download zipped folder** option has been implemented (since, executable option is currently not setup and disabled on frontend).
- For hybrid deploys, upon completion of pickle file upload, the default option of downloading a zip folder facilitates the zipped folder to be downloaded (since, executable option is currently not setup and disabled on frontend).
Blockers:
- Required a **way to select Categories from the Data Directory** of the user, to populate within the Flask App.
- A way to **recursively delete directory contents** was required as `shutil.rmtree()` did not seem to work in Windows.
- A way of **sending the Pickle file to the Backend** was required as the generic method only provided the Pickle file contents, which when sent to the Backend, appeared **corrupted**. Libraries like `jsonpickle` also were of no use in this case.
- **Optimization of pickle file upload** was required to efficiently handle large model uploads.
- **Zipped Folder needed to be sent to Frontend**. The normal way of sending a file from Backend wouldn't work.
- A way of letting users **use both type of deployment** (local and cloud) was essential. The UI and Backend needed a re-design.
- Many parts of the **Backend code seemed repititive**, hence a separate Django app with its own `urls`, `views` and `utils` to handle Deployments were essential.
Key Takeaways:
- Learnt about the **File System Access *Web API*** to select Data Directory and Pickle File Upload.
- Learnt about **Pickle Serialization** format used in Python, and **ArrayBuffers** to handle pickle uploads to Backend.
- Learnt how to setup a custom **Django app** for deployments.
- Implemented **logic for chunking a large pickle file** for upload.
- Learnt about **zipping directories** in Python.
- Learnt **GitPython** in order to work with Git using Python.
- Solidifed knowledge on scripting with Python and manipulating directories and file contents.
Resources:
- [**Web API for File System Access**](https://web.dev/file-system-access/)
- [**Django Apps**](https://www.geeksforgeeks.org/how-to-create-an-app-in-django/)
- [**Recursively Deleting Driectory Contents**](https://stackoverflow.com/questions/2656322/shutil-rmtree-fails-on-windows-with-access-is-denied)
Work 14: Cleaning of the React Code
------
Author: Raj Tiwari
Description:
- Issue [#170](https://github.com/Auto-DL/Auto-DL/issues/170)
- Cleaned redundant code from all the React Files
- Removed the repetitive code and centralized the common code
- Fixed majority of the DOM warnings and errors
Blockers:
- Some of the DOM warnings could not be fixed as the source of those warnings was not shown in the console
Key Takeaways:
- Learnt about the different warnings and errors, their causes and fixes
Work 15: Fixed App crash on logout from Step2.js screen
------
Author: Raj Tiwari
Description:
- Issue [#215](https://github.com/Auto-DL/Auto-DL/issues/215)
- Fixed the app crash which occured because the user was not redirected to the login page on logging out from the Step2 page
Work 16: Dynamic name for downloaded file
------
Author: Raj Tiwari
Description:
- Issue [#158](https://github.com/Auto-DL/Auto-DL/issues/158)
- the downloaded file name was always test.py initially, changed it to the name provided in the project details
Key Takeaways:
- Should consider all the possible edge cases that a user can name a file
Work 17: Add blank space validation
------
Author: Raj Tiwari
Description:
- Issue [#201](https://github.com/Auto-DL/Auto-DL/issues/201)
- Initially, there was no check whether on the details provided by the user apart from checking the empty value. A check was added which trims the input values before the form submission and raises appropriate wrt to the same
Work 18: Share projects
------
Author: Raj Tiwari
Description:
- Issue [#207](https://github.com/Auto-DL/Auto-DL/issues/207)
- User should be able to share their own projects with other users and simultaneously collaborate on the same
- Achieved using symlink, by which a symlink of the owner user's project is created in the directory of the user it is shared (the symlink has the name format as "shared_<project_name>")
- A new key("shared_with") is added in the meta.json file of the user which contains the list of all the users' with whom the current project is being shared
- The input field of the users to share with has auto-completion feature which suggests the names of the users
- A shared icon appears besided the projects which are being shared, hovering on the same lists all the users which whom the project is being shared currently
- A seperate table of projects is displayed the home page which lists all the projects that have been shared with the user,user can clone, delete and add the same
- If the owner deletes a project, it is deleted from the accounts of all the users it is being shared with
Blockers:
- Symlink creation requires administraion privileges in Windows, so the user must have administration rights while using the feauture
Key Takeaways:
- Familiarized myself with the working of the Backend part of the website
- Gained confidence working with the routes, making API calls and interacting with the database
Work 19: Separate the state of password fields of Login and Registration form
------
Author: Raj Tiwari
Description:
- Issue [#261](https://github.com/Auto-DL/Auto-DL/issues/261)
- The password fields of the the login as well as the registration page shared the same state, as a result of which changing the value/password visibility in one was reflected in both the forms, so their states were made independent.
Key Takeaways:
- always try to make different field have a seperate state no matter how similar they are
Work 20: Unit Tests for login and registration page
------
Author: Raj Tiwari
Description:
- Issue [#282](https://github.com/Auto-DL/Auto-DL/issues/282)
- Isolated testing to the FrontEndApp (tests do not verify the correctness of the Backend APIs).
- Prevented mocking axios requests in order to test like an actual user, as well as reduce requests cost to the server.
- Configured Mock Service Worker (MSW) to intervene axios requests.
- Created dedicated handlers and resolvers for the “Login and Registration” part
Blockers:
- Did the testing part for the first time so was not very familiar with the dos and the don'ts
- Faced difficulties while creating the mocks for the server and the React hooks
Key Takeaways:
- Not as difficult as it sounds hearing the first time
- Make the tests simulating the behaviour of the user when he is interacting with the webpage
Work 21: Publish code to GitHub
------
Author: Raj Tiwari
Description:
- Issue [#308](https://github.com/Auto-DL/Auto-DL/issues/308)
- User can authorize the Auto-DL app with their account
- An access token is generated which is encrypted and stored in our database
- On successful authorization, the user can directly push the generated code to their GitHub account by creating a new repository with the option to add the filename, repo-name, commit message and whether or not to make the repo private
- User can logout from the account, whereby the stored code is deleted from the database and new code is generated on next login
Blockers:
- On successful authorization, GitHub redirects to a particular assigned page with the code as a query parameter of the URL with which the access token is generated, faced some difficulties in fetching the same and making the API call to generate the code as it was intervened by the default redirect calls of the website
- GitHub stopped the support from completely revoking the access token with an API call, so even though we are deleting the access token from our database when the user logs out, the key is still valid since auth access needs to be manually revoked by the user using the UI
- User has to create a new repository everytime as of now, since there might be merge conflicts on updating the same repo (we can device some strategies to deal with the same in the future)
Key Takeaways:
- Learnt to know the working of OAuth in general and the GitHub OAuth API
- Learnt the encryption algorithms and implemented the same
Work 22: Designed the website for the next version of the project
------
Author: Raj Tiwari
Description:
- [Link](https://www.figma.com/file/AADKgmJowU3o85t6svXR9s/Home?node-id=0%3A1)
- Finalized new theme of the website
- Revamped the design for all the pages and added new pages wrt to the new planned features
Key Takeaways:
- Learnt prototyping in Figma
Work 23: Improving Dialog Box on main page
------
Author: Pratik Vartak
Description:
- Issue [#175](https://github.com/Auto-DL/Auto-DL/pull/197)
- Completely styled the alert into a dialogbox.
- Removed the old conventional alert.
Blockers:
- Was new to material ui so and new to codebase as well so it was difficult to figure out a few aspects.
Key Takeaways:
- Learnt about the material ui dialog component.
Work 24: Clone Layers in UI
------
Author: Pratik Vartak
Description:
- Issue [#208](https://github.com/Auto-DL/Auto-DL/pull/248)
- Added a clone icon to layers.
- Clones a layer along with all its properties.
- The new generated layer is independent of the parent layer from which it is cloned.
- Changes in cloned layer doesnt affect the parent layer from which it is cloned.
Blockers:
- since the clone icon was within the div shared with layer,i had to figure out some trick to make the onclicks independent of parent layer div and clone icon as the layer used to display its details onclick and clone icon used to clone the layer.
Key Takeaways:
- Learnt about the material ui icons box components.
- learnt how to deepclone an object in js using lodash deepclone method.
- learnt never to change a state variable directly instead make a dummy variable and save changes in it and set state of state variable using setState function and dummy variable.
Work 25:Added infoicons/tooltips to all textfields
------
Author: Pratik Vartak
Description:
- Issue [#253](https://github.com/Auto-DL/Auto-DL/pull/255)
- Added infoicons/tooltips to all textfields
- Infoicons had a functionality of displaying helpertext for a specific amount of time onclick.
Blockers:
- The material UI select components werent having helpertexts so I added a custom paragraph to each and every select tag.
- Since the custom paragraphs were added extra care was needed for their font styles and properties.
- Since the descriptions were larger in the div displaying details of layer properties overflow was needed which wasnt suiting
with the page design so needed to redesign it.
Key Takeaways:
- Learnt about the material ui select ,textfield,helperTexts,arranging small components efficiently on page without disrupting the design of the page and mock properties of a component if werent available.
Work 26:Enabled to edit values in textfields of type image in preprocessing tab
------
Author: Pratik Vartak
Description:
- Issue [#267](https://github.com/Auto-DL/Auto-DL/pull/268)
- Enables user to edit values in textfields of type image in preprocessing tab.
- A bug fix
Blockers:
- None
Key Takeaways:
- Learnt about the difference between defaultvalue and value property of material ui ,textfield.
Work 27:Model Layers Validation
------
Author: Pratik Vartak
Description:
- Issue [#284](https://github.com/Auto-DL/Auto-DL/pull/285)
- Validates the layers by suggesting the correct layers to be added.
- Prompting with a warning if an invalid layer is being added by the user.
- Added a check on every valid layer to be added.
- Added a warning on every vinvalid layer added.
- The layers are validated on every render.
Blockers:
- The algorithm was required to run on every render so i needed to modify the useEffect function accordingly and also on every reaload,on moving ,deleting and adding layers .
Key Takeaways:
- Learnt about how layer dimensions affect a build of a machine learning model .
- How to use useEffect without having a dependency.
Work 28:Developed Try-Us part for demo
------
Author: Pratik Vartak
Description:
- Link to tryUsApp (https://pra-developer-tik.github.io/tryUsAuto-DL/)
- The app gives a quick demo of how a users model creation process is eased by enabling user to drag and drop layers amd add its properties without writing a line of code.
Blockers:
- The selection of color theme was the most difficult aspect.
Key Takeaways:
- Learnt how to extract components from a built react app and along with the states associated with it.
Work 29:Embedded React App in auto-dl WebPage
------
Author: Pratik Vartak
Description:
- Embedded app in auto-dl link (https://pra-developer-tik.github.io/auto-dl.github.io/)
- Embedded the react app in auto-dl webpage.
Blockers:
- Since the task was unique one and very few developers performed the same it was difficult to search for a resource guiding embeding react in a html page.
Key Takeaways:
- Learnt how to embed a react app in html page.
## :link: [Task List & Status](https://trello.com/b/LkDrHH9I/frontend-internship)
###### tags: `Summer` `Internship` `Book` `2021`
Sign in with Wallet
Connect another wallet