aasthamehtatech / elemento Goto Github PK

The Screenshot in the Readme is not updated.

The team page has some unused variables. Remove them.

The footer element seems to have a ton of unused variables. Remove them, check if everything is working fine and make your first PR!

When going to localhost:5000/auth/google the page is showing an error saying Invalid Client (401) this is happening because the file i.e. passport.js inside the config folder is not able to access the CLIENT-ID defined in the environment variables. The endpoint works fine when the ID is hard coded but I want it to work with the env variables for security purposes.

#2

• Fix the variables so that the Gmail login prompt shows up.

• Login using any of your account.

• Check DB for your entry

Now that we're opening our project for more foreign developers to contribute rather than the team. It'd be good to have a template for PRs. Refer to this article for the same.

• 1) The footer seems attached to the featured elements section. Add some margin-top to it.
• 2) The social media buttons need to be added to the center

Refer to the design https://xd.adobe.com/view/eb226106-0db5-4634-90f5-75cd939550a6-be71/

Type of issue/enquiry

• CheckBox State Update either by Individual/global state update & maintenance

Description

• Clear All CheckBoxes of individual elements after "DownloadAll" button is clicked
  
  so as to avoid manual unchecking if user wants to use it again.

Other Specifications

• Steps to recreate : Go to Elements Page -> Check few elements -> Click Merge Button -> Click Download All Button
  

Note: Although the selected _set & merged_strings gets cleared but checkboxes still remain marked

• Hardware/software specification : Any

In the routes folder inside elementRoute there's a GET request to get all the elements of a specific type (navbar, buttons etc.) instead of req.params.name we need a regex which will search for anything after that too. For eg - if I search for 'navbar' I should not just get the element that's named navbar but also all the elements named navbar xyz. The GET request code is given below

router.get("/:name", async (req, res) => {
  var elements = [];
  elements = await Element.find({ name: req.params.name });
  res.send(elements);
});

Need Of Feature

• Description: Currently only single element/component design could be downloaded, A download All button would provision ease of use to users.
• Problem it would solve: Downloading/ Copy pasting each files contents manually is required
• Suggested Solution/ Changes: Create a Download All functionality that:

1. Include a Checkbox functionality that updates state of each element. (Selected or not)
2. Tracks Selected Items/ Elements in an array
3. Download Button functionality that merges all HTML, CSS & JS files of selected elements respectively.

Additional context
Array of Checked Elements to be cleared on every reload.

Type of issue/enquiry

• Update Usage Part in docs(README) for DownloadAll functionality

Description

• Add steps to DownloadAll Selected elements
• Make & link DEMO GIF on the same

Other Specifications

• Steps to recreate: Go to Elements Page -> Check few elements -> Click Merge Button -> Click Download All Button
  
  Note: Setup .env & upload a few demo elements first. Contact if further help needed
• Hardware/software specification: Any

The docs as of now have an intro which was set at the time when people were applying for PSoC. Since now the team has been selected and the project is at a stage where many people are contributing to the project. It'd be good if the docs have clear guidelines about the following thing in the described order.

• Introduction of the project.

• How to setup a local build.

• Guidelines for creating an issue.

• Guidelines for making a PR.

• List of the members of PSoC team.

Feel free to ask any doubts 💯

The Usage part of the docs should have the following points at least

1. How to explore and search for different elements.
2. How to view and download their code.
3. How to contribute elements.

Attach GIFs of all the actions so that it's easier for the person to understand just by looking at the video.

Feature Description
Add a link in the footer which triggers a modal which has fields to create an issue in the repo. This modal will be connected with the endpoint being created to open new issues in the repo from the website.

Problem it would solve
This will help users report bugs easily and ask for new features.

Suggested Solution/ Changes

• Add a link in the footer.
• Trigger a modal opening on clicking the link.
• Add 3 fields inside it :- Name, description and checkbox between issue and feature

Additional context
This is the front-end for the following issue #84

The elements currently overlap the search bar. Make it responsive so that it stays fine in all the viewports.

At the very end in the docs add a link to the MIT license.

The **hover ** animation of the get started button doesn't look good. Change it to maybe a darker shade of the original color

ElementView.js just looks like a 2D box right now. We need a more materialistic design like the what we have for ElementItem. Feel free to take the shadow values from there and add a bit of your taste to it. Attach an image of the new view with the PR

Feature Description
Add an endpoint to the back-end api which takes in data and using the Github API v# opens an issue in the repository.

Problem it would solve
This will be helpful so that people can report bugs or ask for new features

Suggested Solution/ Changes

• Add an endpoint to the API / Create new route file for Github

Additional context
This documentation might help in achieving the required result.

NOTE
Attach screenshots HTTP requests and the respective results with the PR.

Remove all the commented code to improve readability.

Type of issue/enquiry

• Back-end unit testing

Description

• We have some basic tests for front-end it'll be good if we can have the same for back-end as well so that continuous integration can be setup.

Screenshots (if any)

• NA

Other Specifications

• NA

The footer currently is not at the end of the page. It shows white space under it. It needs to be such that it is at the very bottom.

Feature Description

• Since we will start with public PRs after 5-6 Sept. It will be good to add a code quality check to remove my hassle of personally reading each and every line while reviewing.

Problem it would solve

• Code review

Suggested Solution/ Changes

• Add a Github action for the same.

Issue: The element cards just have names showing for now from the DB and not the image.
Expected behavior: The element cards should have a picture from the element on top and then it's name.

Now that we're about to release our project, it'd be good to have an issue template in case someone wants to report an issue. This will help us get all the information about the issue so that we can work on it quickly. The template shoul at least include these headings. Feel free to add more if you feel so.

• Type of issue

• Steps to recreate

• Screenshots (if any)

• Run-time environment

Contribute page has 3 methods which update the states of jsCode, htmlCode and cssCode respectively. All of these methods essentially perform the same task therefore not following the DRY principle.

Refactor that method to an external file in the utils folder and all it in the Contribute page.

The design of search bar on elements page was just a placeholder for the first review. We need to upgrade it to match the theme of the page. Feel free to explore your creativity with it's design just make sure not to break the functionality.

Attach a picture of your changes or preferably a video of it's working state with your changes in the PR .

In the tech stack section mention MongoDB also at the end with a link to the official documentation.

No explanation needed.

• Component Wise Unit Testing: To check Each component renders properly with no issues by snapshot checking method (Jest/ Enzyme)( Eg: if the footer is loaded it should look like we expected it to be)

• Each button works properly & routes to required destination

• To test Modal buttons (Elements Page) of download/ copy work fine & serve expected functionality

• Access to valid users only (Eg: Elements page should be accessible to valid users /logged in users only)

• Uploaded Component Testing for Contribute Page

Type of issue/enquiry

• Documentation

Description

• We have setup Cloudinary to handle assets and it requires certain env variabbles such as API_KEY, CLOUDINARY_URL and 2 more. They should be added to the readme so people can easily setup the project locally.

**Issue : **The element cards are being shown one under the other.
Expected Behavior : Show the element cards in rows and columns.

We plan to write tests for the front-end of the application now. We have decided to use Jest and Enzyme for the same. Please refer to this article for the same.

• Create an tests directory.

• Write a shallow render test for App.js to check if the environment is setup correctly.

./src/context/element/elementState.js
Module not found: Can't resolve 'axios' in '/home/akash/github/Customizable_Portfolio/client/src/context/element'