DEV Community

Cover image for Second full-stack app: Roomie - Find a room to rent! Built with: React + TailwindCSS + Express + MongoDB + Heroku / S3
L.L.
L.L.

Posted on β€’ Edited on

49 7

Second full-stack app: Roomie - Find a room to rent! Built with: React + TailwindCSS + Express + MongoDB + Heroku / S3

Hey, devs!

I've been studying for a few months now and after one month and 25 deploys, this is my second full-stack project: Roomie - a website to find rooms to rent or to list your place. πŸ˜…

I created this for the sake of learning only and since my first full-stack project was a simple CRUD app, it was a blast having this experience!

demo: https://roomiew.herokuapp.com/
repo: https://github.com/lucasmrl/roomie

Built with:

  • FE: React (Hooks, Context API, Router) + TailwindCSS

  • BE: Node.js (Express.js) + MongoDB

  • Hosted on Heroku / Images in AWS S3

What I tried to learn:

  • Authentication (Sign up, Log in, Log out, Reset password)

  • API Filtering, Sorting, Pagination (Even though it is not implemented in the FE)

  • Send e-mails from back-end

  • Upload pictures to S3

  • Security

  • TailwindCSS (first time using it)

  • Agile methodology (tried to organize my user stories, sprints, daily stand-up meeting, ...)

Definitely it is far from perfect, but it helped me a least to get my hands dirty. I appreciate any feedback!

Be safe! ;)

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (20)

Collapse
 
ceblakely profile image
Christina Blakely β€’

The UI is great :)

Collapse
 
theuserll profile image
L.L. β€’

Thanks you Christina! I am terrible with UI, but I just say that using TailwindCSS helped me a lot!

Collapse
 
ceblakely profile image
Christina Blakely β€’

I haven't heard of TailwindCSS but i'll be checking it out!

Collapse
 
michaldulik profile image
MichaΕ‚ Dulik β€’ β€’ Edited

Good job! I found a small bug, when your user is using english language everything seems to work, but if user system / browser language is not an english [ like mine ] it suggest a place in his language [ In Poland New York = Nowy Jork ]. When you click on that suggestion app displays an error: "No listings available yet".
screenshot1
screenshot2

Collapse
 
theuserll profile image
L.L. β€’

Wow, nice catch! I will fix that! Thank you! :D

Collapse
 
rsa profile image
Ranieri Althoff β€’

If you write it like React + Express + Mongo + Tailwind, you will have built a rent service with the REMT stack.

Collapse
 
theuserll profile image
L.L. β€’

Ranieri,
I didn't know that. Thank you! :D

Collapse
 
michaeltharrington profile image
Michael Tharrington β€’

Just to say that I really dig the name of your app, haha! "Roomie" is a great name for this. πŸ˜€

Collapse
 
fayaz profile image
Fayaz Ahmed β€’

Very nice. A small suggestion in case you are scaling this in the future - the individual apartment page urls should have a slug instead of your mongodb ids -
Something like
roomiew.herokuapp.com/listing/newy... instead of roomiew.herokuapp.com/listing/5ed3.... this will go a long way for SEO and Google ranking.

PS, I had did the same thing for a project henc the suggestion.

Collapse
 
theuserll profile image
L.L. β€’

@Fayaz, thanks man! Yes, I even know how to do that, but since it was something simple (use a slug), I thought about leaving it behind.
Now, I have zero knowledge about anything related to SEO and Google ranking, so thank you for the tip!!

Collapse
 
alejogb1 profile image
Alejo Garcia β€’

I wish to do seomthing similar in the future, but wouldn't know where to start unless I have some guideline or turorial. What do you think?

Collapse
 
theuserll profile image
L.L. β€’

@Alejo Garcia,

For me, I like to break all the "features" and start from the basic.
After I got a grasp in Javascript (ES6), I said "what about backend?".

Then, diving into node/express I decided to create my first CRUD app:
appjournals.herokuapp.com/

Since it worked, "what about authentication, upload images, etc"?
Then I dived into that.
I bought this Udemy course a few months ago, he is an awesome teacher, but I am not good in following along. (udemy.com/course/nodejs-express-mo...) I never completed any of those two projects that he teaches it.

After having my idea of a good app that would also be good to use for apply for jobs, I started. Every time I needed to implement something, I watched the videos and implemented their concepts for my project.

For React and Tailwind, I used different tutorials and articles to learn what I specifically needed. :D

Collapse
 
alejogb1 profile image
Alejo Garcia β€’

Thank you so much.

Collapse
 
regisnut profile image
Regisnut β€’

Hi, how to do you useAWS for image? is it kind of mix with multer? is it like cloudinary?
THanks

Collapse
 
theuserll profile image
L.L. β€’

Hi! Sorry for taking so long. I am just storing the images in an S3. Cloudinary to process the images before sending to the bucket

Collapse
 
zivtamary profile image
Ziv Tamary β€’

How can I contact you for a business offer? πŸ˜…

Collapse
 
toclean profile image
Connor β€’

This looks both aesthetically pleasing (especially the home page) and useful!

Collapse
 
theuserll profile image
L.L. β€’

Thank you for your kind words. :)

Collapse
 
gillarohith profile image
Rohith Gilla β€’

Amazing

Collapse
 
theuserll profile image
L.L. β€’

Thank you Rohith!!

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more