cyboholics/portfolioshop

Portfolioshop builds custom portfolio websites with submitted user data.

Portfolio Shop

What our project does?

We are trying to build a website to make the process of building personal portfolios easier. Often we have seen students struggle and waste their time building their portfolio websites. To automate this process, our website collects data from a user and renders a portfolio for their website.

Why this project is useful?

In addition to all the utilities provided from our ideations, it has a super simple UI that makes it even simpler to use. Most of the times, students face difficulties while building portfolio websites and end up paying a lot. If you're one of them, then we have built a free solution for you.

Also, in this project a diverse range of tech stack is being used, so, if you're a learner then this one is a great project to start with. You can learn a whole lot of things including microservices, databases, object storages, client-server model and many more.

Code of Conduct

Follow the Code of Conduct and maintain the decorum. Violating the Code of Conduct will lead to ban the user from this organization.

Contribution guidelines

Check the SETUP.md file for initial setup.

• Choose an issue to work on
• Fork this repo
• Work on the assigned issue
• Create a pull request

Check out the Contribution Guide for more insights.

portfolioshop's Issues

Enhancing the UI of the website

Describe the solution you'd like
https://sukoon.my.canva.site/dark-blue-and-purple-bold-tech-app-business-website this my idea for the UI

Create a 404 page

Is your feature request related to a problem? Please describe.
We don't have a 404 page yet. Would love to have one

Describe the solution you'd like
Please design and code a 404 page. Or you may create a design and put a screenshot here. If someone else like he/she could code it.

Logout Button is Squashed

Describe the bug
As you can see the logout button is not shown properly.

To Reproduce
Steps to reproduce the behavior:

1. Go to the homepage
2. Click on google sign-on
3. See error

Expected behavior
Logout Buttons should be the same size as the other two buttons, and floating it to the right makes it blend well with the UI.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser chrome
• Version Latest

Additional context
I would like to work on it, if you can assign this to me :)

Fix Security vulnerability from npm audit

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to root directory of the project
2. Run 'npm audit'
3. See error

Expected behavior
There should be 0 vulnerabilities

Additional context
npm audit fix won't help. It needs manual reviews

Add other auth systems [GitHub, Microsoft, etc.]

Is your feature request related to a problem? Please describe.
Currently, we're accepting only google OAuth. But we should accept other authentication systems also.

Describe the solution you'd like
Needs a bit of workaround in both the frontend and backend of the project.

Update README

A README is often the first item a visitor will see when visiting your repository. We recommend that your README includes information on:

• What the project does
• Why the project is useful
• How users can get started with the project
  • Explain to users that there is a LEARN.md
  • Explain how to setup the project on their computer
• Mention your code of conduct

You already have great information in your README thus far. Adding this additional bit of information will really help other students looking to contribute.

Running Tests on API

Is your feature request related to a problem? Please describe.
Currently, we need to manually test the APIs by running the postman collection. We need to automate it using Newman CLI and GitHub actions.

Describe the solution you'd like
Create a workflow that runs the postman collection and checks all the tests.

Describe alternatives you've considered
Instead of postman tests, we might also use JEST or any other unit testing tool and connect it to GitHub actions.

Update the UI of the website

If you have great UI skills with Material UI, please update the UI of our project. Reply under this comment and get the issue assigned to you. Then you can work on the project as per the contribution guidelines.

Add an API endpoint to get all the available templates in the project

Describe the solution you'd like
Check out the templates folder in the API directory. Dynamically serve all the templates in there.

Enhance the UI responsiveness

Is your feature request related to a problem? Please describe.
Some components of the UI are not completely mobile and tablet responsive.

Describe the solution you'd like
I'd like to enhance the responsiveness of the UI by properly spacing some of the buttons and components in the attached screenshots.

Additional context

 

Meta Tags are incomplete in Index.html for Favicons

Describe the bug
HTML Meta tags plays important vital roles and incorrect meta tags may cause issues.

To Reproduce
Steps to reproduce the behavior:

1. Navigate to Index.html file in public folder
2. webp for apple-icon needs to be replaced with ong file of 180x180
3. Missing 16x16 & 32x32 favicons tags & images
4. Missing MS-Application tile color

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version 105

Update Secuirity.md

Go through the codebase and update the security.md file.

Improve MenuBar button

Is your feature request related to a problem? Please describe.
After clicking on the "Source" button in MenuBar it is displaying the error page.

Describe the solution you'd like
After clicking on the "Source" button, it can be redirected to the (GitHub link) in a separate tab.

I would like to work on this issue, Can you please assign me?

Linkedin Button is not working

Describe the bug
The Footer of the website has a LinkedIn button, which is forwarding to a 404 page.

To Reproduce
Steps to reproduce the behavior:

1. Go to footer
2. Click on LinkedIn Button

Expected behavior
Remove the LinkedIn button or point it to a page saying we will be on LinkedIn soon.
I personally prefer the second option.

**Desktop

• OS: All
• Browser All
• Version All

**Smartphone

• Device: All
• OS: All
• Browser All
• Version All

I would like to work on it if you can assign it to me :)

Update the Image Upload UI

Is your feature request related to a problem? Please describe.
The UI of the upload Image component is a bit messy

Describe the solution you'd like
Make the height and width of the image upload component constant (30 units) and make the original image visible on hover like a tooltip. You may suggest your own idea also.

Community Exchange Introduction/Tracking:

👋 Hi @sudip-mondal-2002 ,

I am your GitHub mentor for the GitHub Education, Community Exchange (CX) project. I'll be collaborating with you on preparing your repo for CX.

You mentioned in your submission that you wanted to submit a Learn + Collaborate repo. This means that you would like to teach students, step by step, how to build this project as well as invite other students to collaborate and add features to this repo. I will generate issues, which will provide guidance on how to prepare your repo for a Learn + Collaborate CX submission on June 1, 2022.

This issue will serve as a tracking issue to track all issues related to CX. I recommend creating a new branch for every issue and opening a pull request to track changes so we can effectively collaborate with each other and merge changes when you and I feel like those changes are ready to be merged on your primary branch.

If you have any questions or concerns, please feel free to leave a comment on this issue or any of the other issues that are generated.

I look forward to working with you

Issues:

• #85
• #86
• #87
• #88

Add LEARN.md

Learn repos should have a LEARN.md file to teach another student how to build your project step by step. You can explain how to build your project with text, code snippets, images, or even short (5 minute) long video lessons. As the maintainer of a Learn repo, the LEARN.md file requires you to think critically about how to explain the building of your project and how to also make it engaging. We don't expect you to be an expert teacher, but we would like you to reflect on how difficult it was to get to your level of knowledge, and then provide friendly guidance to help other students to learn.

If your project is very large, consider just teaching a certain tool or implementation that your project utilizes.

Update repo description

Other than GitHub Topics, your description will be the primary way of catching the users eyes. Your repo description should be clear and concise. Ask yourself:

• In one sentence, how do I convey what my repo does?
• What type of users am I interested in attracting to my repo?
• If I was a user, what words or phrases might spark my interest?

This is an open source portfolio management system.

This is a good start, but what is a "portfolio management system?" When I see "portfolio management," I think this repo will manage my stock portfolio versus my brand portfolio. What can we do to make this clear for other students?

FORTIGUARD SECURITY PREVENSION

Unable to access site

Also it mentions about the security certificate not being from legit source. Has proper SSL certificate been added?

User Date of Birth conversion from timestamp to Date in DD, Month, YYYY Format

Describe the bug
User Date of Birth is shown as a stringified object of the date.

Expected behavior
Date of birth should be converted to DD, Month, YYYY Format format inside EJS template, as in database it's being stored as a date object or timestamp.

Social media icons are visible even if the URLs are not provided

Describe the bug
To create a portfolio website under the "User Details" there are fields to enter the "Social Handles" URL. Though, if the links are not given for some of the social accounts the website is displaying the respective social media icon. In my case, I have given only Twitter, Linkedin, and GitHub URLs. But on the website, the Facebook and Instagram icons are also visible. Similar behavior in the footer too.

To Reproduce
Steps to reproduce the behavior:

1. Go to the website creation page https://www.portfolioshop.tech/
2. Give the "Social Handles" URL which is under "User Details"
3. Save the changes and click the "VISIT YOUR WEBSITE" button
4. See the icons in the Hero section

Expected behavior
It only renders the icon for the URLs provided

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 106

Smartphone (please complete the following information):

• Device: No response
• OS: No response
• Browser: No response
• Version: No response

Additional context
No response

Document the project parts

Document all the steps for a contributor and users in the different markdowns inside the repository. You might start a discussion before documenting things to get clear. you can do the works partially

• Update the Readme.md
• Update the Contribution.md
• Create Readme files in both App level and API level

Add aria label to components

Is your feature request related to a problem? Please describe.
Aria label is an important feature to have on the website in order to be inclusive with the differently-abled people.

Describe the solution you'd like
Please add the aria-label tag to the attributes used in the project

Images in How it works section are not displaying

Describe the bug
As we can see in the screenshot, the images are not displaying.

To Reproduce
Steps to reproduce the behavior:

1. Go to public folder
2. Click on productHowItWorks1.svg (similarly other 2 images)
3. See error

Expected behavior
Images to be displayed, in 'how it works' section

Screenshots

Desktop

• OS: Windows
• Browser Chrome
• Version 106.0.5249.119

Additional context
I would like to work on this issue if you assign me.

Want to scroll button in main page

Adding More Templates as a part of our EJS Template (Portfolio Websites) Gallery.

The end product of the web app is a fully rendered HTML that a user can showcase as his portfolio website or just a web resume.

• What we do is simple, we pick up a free HTML template from the internet.
• This Template is chosen to be an option for user to pick as a portfolio website.
• We change the HTML document for this template and put in EJS tags wherever necessary.
• Now this EJS script is filled dynamically by JS in accordance to the details user gives in our React App.
• The end HTML file which is filled by user details are returned back to the user.

Currently we have only one template as an option, but we like to create more such ready to use templates as EJS script.

What the contributor should do?

• Visit https://bootstrapmade.com/bootstrap-portfolio-templates/ or similar platforms to find ready-to-sue HTML templates.
• Learn EJS: https://ejs.co/
• Change the HTML code to EJS, refer to this current template: https://github.com/Portfolio-Shop/portfolioshop/blob/master/api/templates/template1.ejs.

Some quick notes.

• Make sure all the CSS (Bootstrap or anything else) is part of the same HTML file.
• Be sure to use all JS from the same HTML file.
• Basically template should be just one EJS file that has all HTML, CSS and JS as it's part, make sure to refer this EJS: https://github.com/Portfolio-Shop/portfolioshop/blob/master/api/templates/template1.ejs

Add all contributors to teams page

Is your feature request related to a problem? Please describe.
Currently, only repo maintainers are added to the team's page statically.

Describe the solution you'd like
Along with the statically rendered maintainers we want to render all the contributors dynamically.
You may use https://contrib.rocks/image?repo=Portfolio-Shop/portfolioshop this image or any other alternative.

GO-TO-TOP BUTTON

Go to top button
For moving to the top of the page

Improve UI of buttons

Is your feature request related to a problem? Please describe.
The visit website and logout button need some padding and alignment.

Describe the solution you'd like
Improve the UI using a margin-right around the buttons

Describe alternatives you've considered
I am thinking of moving the logout button to the right side to make it more clear to visible.

@sudip-mondal-2002 Please assign me this issue

Render a loading prompt

Describe the bug
When the API is called to fetch the user data for the dashboard, there should be a loading screen while it's fetching it.

Add a loading screen/prompt/snackbar while fetching the data

Add a snackbar on save

Is your feature request related to a problem? Please describe.
Currently, an alert box appears on save success or failure in the dashboard.

Describe the solution you'd like
Show the snackbar instead of alert dialogue in there.

Razorpay Donate Now Button not Scaling on Mobile

Describe the bug
Donate Now button not scaling on mobile

To Reproduce
Steps to reproduce the behavior:

1. Go to website on mobile

Expected behavior
The Donate now button is either hidden or scaled down to fit properly.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: Pixel 5
• OS: Android 12
• Browser: Chrome
• Version: 104

Dashboard crashed: Urgent help needed!!

Describe the bug
The dashboard has crashed on production.

Handle null values in ejs.

Describe the bug
The ejs files in the project don't handle null values.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'www.portfolioshop.tech'
2. Click on 'Continue with google'
3. Fill up your details but leave some things.
4. See your website contains the buttons related to the blank things in there but contains null click handlers.

Expected behavior
Shouldn't contain buttons corresponding to the null values.

Add image upload options

Is your feature request related to a problem? Please describe.
Add image upload options in the about section, user data section and projects section.

Describe the solution you'd like
The component for image upload is already built, need to connect it to the respective views.

Add option to download portfolio as an HTML file

It'd be nice if people can download the HTML directly from the website.

Create a button and allow downloading the HTML for the portfolio

This link >> www.portfolioshop.tech << isn't working..

Want to scroll button in home page

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Manifest.json FIlled with Demo Content

Describe the bug
Manifest.json file is wrong/has incorrect details of the website.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/Portfolio-Shop/portfolioshop/blob/master/app/public/manifest.json
2. Data/Details wrong

Add new templates in EJS

Is your feature request related to a problem? Please describe.
Currently, only one template is there.

Describe the solution you'd like
You can create templates based on any framework, but don't duplicate any existing template. You're free to use any CSS frameworks (Bootstrap, Material UI, etc.)

Fix the errors in console

Describe the bug
On starting the react app, some errors show up in the console. Fix that issue.

Move or Change Save button

Is your feature request related to a problem? Please describe.
I didn't see the the save button at the first sight, when I finally saw it, I thought it was a footer button, so I had to scroll to know that button was to save the information.

Describe the solution you'd like
I'd like the button to be changed as a static one or move up to be more visible for the user.
I think it's perfect for mobile devices but for web I think is better a button at the end of the form as usual.

Additional context
I was looking for the button in the red rectangle section as in many other forms.

Write tests for APP

Is your feature request related to a problem? Please describe.
The front-end currently doesn't have any tests written.

Describe the solution you'd like
Use Jest or any other Unit testing library to write tests for the react frontend of the project. Connect them to GitHub action so it could be run before deployment.

Optimize the SEO

Find and fix the issues with the SEO compatibility of the website.

Fix performance

Describe the bug
Some parts of the website take a lot more time to load

Additional context

• Fix the background image loading time
• Fix initial loading time of initial buttons

Enable support system

Is your feature request related to a problem? Please describe.
Sometimes things need manual reviews and hence we need to have a support system.

Describe the solution you'd like
Users can come up with different problems and report them to us. Admins should be notified about them.

Add Topics

In Community Exchange, GitHub Topics will help the discoverability of your project. You already have some great topics on your repo!

If you happen to use any offers from the GitHub Student Developer Pack to build your project, I would recommend adding the company names to increase discoverability. If you did not, feel free to close this issue.