4gnle/coopefy

First version of a website that connects people who want to collaborate building cool stuff on the internet

coopefy's Issues

Delete Local States where Unnecesary

Some components like ProfileView.js and Profile.js have a combination of Redux states and local useStates() that I should fix. This can be confusing later on.

CSS Revamp

So far the app uses pure CSS for the styling. Would be great to add Styled Components to replace at least part of the CSS.

• There's a UI folder with some of the most used components. Transforming these components from JS+CSS files into pure Styled Components would be a great start.

• Other components may be more difficult to fix as the CSS is all over the place. If you're taking on the job, feel free to re-do everything as necessary using CSS-in-JS.

Use Redux/React hooks Instead of `connect()`

I'm using the old way of redux+react via connect, when there are many hooks that reduce the amount of code like useReducer(), useSelector(), etc...

Landing Page

The website needs a landing page.

This could be difficult as there isn't a specific path to follow as we haven't specified what this website will become exactly. However, the Read Me gives a clear heads-up of what it may become so following that could help.

Feel free to build the landing page following the design standards so far (black/white/gray) to match with the rest of the website's style.

Here's the Landing Page's code.

Here's the DevDAO's Figma file to take inspiration from.

Fix Profile Image Loading on Wrong Profile

When you click a profile with an image, the state persists until you click another profile. However, if the other profile doesn't have a profileimage, the previous' profile profileimage will persist as well, making it look like the new profile has the same picture.

Here's what I tried so far:

• Cleaning the state using a reducer function directly on component rendering. This didn't work as expected, as the profileimage state still persists.

Image Files to IPFS Upload

So far the profile images are uploaded and saved into the MongoDB database. Obviously, this isn't either scalable or secure.

As an alternative, I propose uploading all the images to IPFS and saving the image's link into the database for easier fetching later on.

• The upload-image component's code is located in the UI's folder ProfileImage.js file.

• The current profile-image uploading feature is located at the Profile's route starting in line #303.

• You may need the database's keys to test whether the new route/component works as expected. Feel free to ask for the keys (database may change eventually).

Here's a guide that could help with this:

Nader's on Uploading FIles to IPFS

Application Form

The website needs an application form for every project on the page so collaborators can apply on the projects.

Important to note:

• The naming convention and structure for new components depends on related components. Check: Components folder. A simple front-end component will suffice (with clear state management and UI that can be reused - try to use Styled Components for the CSS).

• If you're also making the back-end part to communicate with the database, remember that MongoDB is the database choice for now. Would be great to add an applications/proposals to the project schema as seen in the Project Schema

• Ask for access to the database to receive the .env file with the keys. Be aware the database may change eventually.

State Doesn't Persist on SkillsSelect.js when Editing Profiles

The SkillsSelect.js component is sending the formData directly to the backend when you click save. As you do that, the underlying form for editing the profile gets cleaned up.

To avoid frustrating people, the SkillsSelect.js component needs a revamp, where the state is connected to the createProfile.js component and saved without disrupting changes.

Change Profiles to Display 'Projects Created' and 'Working Projects'

It would great to display what every person is working on and creating (and offer the chance to hide if they want).

For example, a collaborator selected for a specific project will have something like:

'Collaborating in [Name of the project]'

Those who create projects will have something like:

'Started [Project name]'

Will have to handle the data directly from the database and add a new property to the Projects.js model accordingly

Search feature for People and Projects components

The app will need a way to scale the Projects and People sections with a search feature. This will make it easy for everyone to find what/who they're looking for.

• The component should start as a front-end piece. Preferably located at the Project's and People's folders. Feel free to add an entirely new component or add it up to the ProjectList.js or People.js components as you deem necessary.

• The project's component is directly connected to the back-end via the Project's API. Remember the app uses MongoDB as the database. If your component will use the database for search, add the relevant function to this file.

Profile Creation on Registering

Thinking of a way to MAKE people create a profile as soon as they register (or as quick as possible). This way they can appear on the People page and others can find them ASAP.

It's important to note that the Register.js page is sending everyone to the Dashboard as soon as they register. This probably wouldn't take more than a few minutes to fix but I'm still trying to think of a "cleaner" way to make it happen.

That is, not being intrusive, pushy, or annoying (I don't like when I'm trying to navigate an app but I'm being pushed to create a profile, etc.)

Add Experience / CV to Profile

It would be great if people could add their experience/work history/CV data to their profiles

This would make it easier for project owners to know whether someone truly fits their requirements for a job position/project

Clean empty fragments

There are tons of empty fragments all around - clean them up!

Derived Values in Redux state (separate them)

Instead of using project: {projects}, use a single state for projects instead. This will reduce the confusion when other people look at the code (+ makes it easier for yourself to use that state later).