I just published my new side project

Hi guys, I just published my new side project and I'd love to have some feedback 😊. I built it in 5 days, focussing only on the essentials.

I had a breeze making this and getting it ready for a demo in the shortest possible amount of time. This is the link: https://www.cow-pilot.io/. I would really love to hear what you think about it.

It is built with React, hosted on Heroku. It's already a win for me, because in the process I learned about styled components, a library that makes styling much, much easier than plain CSS.

I also learned about react-beautiful-dnd, which is an awesome library for drag and drop by the guys who made Trello. They have an eggcellent course on egghead.io to help learn it. I don't like video courses much usually, but this one is really well made and helped build the foundation of my app.

Comments

[Chad Adams]

That orange modal is a very interesting color choice I must say.

Since you know the due date on some of the tasks would be nice if you could see the tasks in a calendar view. Personally I like looking at calendar to get a good sense of time.

Other than that for 5 days of work it looks good so far so good job. :)

[isarisariver]

Thanks a lot for your feedback!
The color sort of just "happened" during testing and then it stuck. I'm not married to it, should I change it? Making it white looks so strange to me after looking at orange for several hours 🤣
A calendar view could be nice. Do you mean something like this?

[Chad Adams]

If it was me I would change the orange color and go with a neutral color. Perhaps take a look at some css frameworks and see what color choices they use for their modals. Yes a calendar view just like that! I would like that way better.

[isarisariver]

I already changed it to white. Thanks again for the suggestion.
The calendar view might take a while. I like the idea, but will put it in the backlog for now.

[Simon Holdorf]

Looks cool, keep going :)

[isarisariver]

Cool, thanks for checking it out!

[Simon Holdorf]

Sure thing!

[Alex Janke]

Hey there, noticed a few minor things that you should be able to fix pretty quickly. It's quite nitpicky though.

• When hovering "Try the demo" or "Contact" in your header, the hover effect pushes the other items to the right side. As a short .mp4 (no clue how to embed it here): i.imgur.com/DvU9jIy.mp4
• The text in your mobile header isn't vertically centered and I can't unsee it
• Why can't I select a date when creating a new task? I have to save it first and then edit
• When I try to click out of the "new task modal", it says I shall enter a title first.. but I want to close it. Clicking outside of a modal should be the cancel action.
• As others said the orange sure is an interesting choice. I'd personally get rid of it asap and just use a white bg for the modal
• Why do I have to save the title first before I can save a new task? Seems like an extra step that doesn't really need to be there
• There are still some console.logs :D
• Your startpage has an email field but no hint to any data-privacy/usage of that mail cough cough gdpr

Other than that pretty neat for a few days of side-project'ing. What are your future plans with the site? Monetize or open source?

Cheers from the opposite side of germany

[isarisariver]

Hi Alexander,

thanks a lot, those are great suggestions! I already fixed some items during my lunch break (who needs food, right?!):

• the hover effect in the topbar
• _More _should be aligned now
• clicking outside the modal while creating a new task will cancel it
• the modal is white now. It does look better now, I agree :)
• changing the title is instant now

Changing the date while creating a new task messes up the drag and drop. I was not able to fix it quickly, so I disabled it for the demo. I agree it should be possible to change it and I will work on it for the beta.

I want to monetize it later, when it's finished. I will probably make it freemium with attachments and more for the premium version.

I will check out the rest after my workday is over, thanks again!

[Louis Low]

UX can be improved. Try to destroy any traditional popup modals and traditional form inputs. It's not easy fighting with the forms-monster. You can always open up a new UI prototyping project with either Adobe XD, Figma or Framer and invite people on the board for collaboration.

[isarisariver]

Hi Loouis, thanks for checking it out! Which traditional popups do you mean? Calendar and select?

[Ankit Kumar Gupta]

Unable to create new task. Always ask for Title for new task.

dev-to-uploads.s3.amazonaws.com/i/...

[isarisariver]

Hi Ankit, thanks for taking a look. Did you try entering a title?

[Ankit Kumar Gupta]

Hi Marian,
Your project is awesome. I just checked again and now I'm able to add new task also. Have you noticed image url I attached in the query. I was seeing different UI back than.
Thank you.

[isarisariver]

Hi Ankit,
Thanks for having another look. Sorry, I actually missed your screenshot, because I was on mobile. In your screenshot you had to click on "Save" to submit the title.
You are right, it's changed now after other feedback that I received. The title is now changed instantly when you type it and you no longer have to click "Save" to submit it.

[Ankit Kumar Gupta]

Okay, Got you. I missed that button. Now It's more user friendly.
Great work.

[isarisariver]

Hi Chloé, thanks a lot for taking a look and for kind feedback :)
Can you tell me, which browser you are using? I don't get any scrollbars when resizing to a smaller size. I am also on Mac, so maybe it's different with Windows?

[Lawrence Lagerlof]

Nice. Since it's a side project, you can publish it here too: mysideproject.rocks

[isarisariver]

Will do, thanks for sharing! Did you build this?

[Lawrence Lagerlof]

No.

[bairrada97]

Really nice, I'll not point any bugs or stuffs like that, because major of people already did that, what I want to propose is, since this is a side project and you are learning stuffs, try to build your own drag and drop, will be challenging and funny and you'll learn how to do It :D

[isarisariver]

Hi, thanks a lot for checking it out. I "wasted" almost a whole day on this before I started searching for a library. :)

I already had a working solution with HTML5-DND (codepen.io/mrnbck/pen/RwWbYgm) but I couldn't get the animation to work for the "removed" item. I later learned that modern dnd works differently and not with the HTML5-API. Maybe I will get back to it later :)

[Nav Pahwa]

Hey, I tried your side project and to be honest the design is super clean and looks good and kind of matches the theme I guess you were trying to achieve. Here are some things you can add and improve:

1. Storing the Todos in Some Type of Database(Postgres).
2. Using Google/GitHub/Twitter/Facebook/Discord OAuth to avoid storing passwords in the database
3. Have an API to implement most of the security there.

Other than that I really like the project.

[isarisariver]

Hi Nav, thanks a lot for taking a look!
You are right, I am already working on the database. The demo is just for a first impression to convince users to sign up.

I am using MongoDB as database, the implementation is almost finished. I was planning to use Auth0, since it's free for up to 7.000 users and I already have a working solution for another project. Using Google/Github etc. for authentication is still on my bucket list, thanks for mentioning it.

It should be possible to offer both at the same time, if I maintain my own userdatabase, right? I can only offer 1 social login with Auth0, but not several.

When both database and authentication are ready I will start sending out emails to the people who requested an invitation.

[Brayden W ⚡️]

Pretty sweet! The icons look pretty nice and the draggable feature is super smooth :D

I'm learning React and the MERN stack right now. What technologies did you use to make this? How will you set up user authentication? Are you using Firebase?

Thanks :-)

[isarisariver]

Thanks! I found the icons on svgrep.com.

The demo and landing page are built with React and hosted on Heroku. That's the only way I know at the moment to deploy a React app, I haven't tried Firebase so far :).
If you are learning React I highly recommend fullstackopen.com. They also explain how to deploy a React app to Heroku. If you have any questions about it, let me know!

Apart from the two libraries mentioned in the post I only used React Router, so that the url changes when you switch between Home and Try the Demo.

I am planning to use Auth0 for authentication. It's free up to 7.000 users and easy to set up. They have a sample app for React that you can download and play with. Again, if you have any questions, just let me know.

[Brayden W ⚡️]

Thanks for the advice and resources. I’m actually using Firebase to deploy the Frontend and heroic for the API/backend. It works pretty well.

Best of wishes!