The latest articles on DEV Community by Md. Abdur Raheem (@mdabdurraheem). https://dev.to/mdabdurraheem https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F787077%2F604b63c6-79a5-4e8a-bb6f-8874138f638d.jpeg https://dev.to/mdabdurraheem en Md. Abdur Raheem Wed, 12 Jan 2022 11:22:37 +0000 https://dev.to/mdabdurraheem/atlashackathon-tralive-an-online-travel-booking-app-2c4f https://dev.to/mdabdurraheem/atlashackathon-tralive-an-online-travel-booking-app-2c4f <h3> Overview of My Submission </h3> <p>This project is an online travel booking website using React.js as front-end, and Express as backend and MongoDB Atlas as database. This project is created to participate in the MongoDB Atlas Hackathon.</p> <h3> Submission Category: </h3> <p>Choose Your Own Adventure</p> <h3> Link to Code </h3> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/Md-Abdur-Raheem"> Md-Abdur-Raheem </a> / <a href="https://github.com/Md-Abdur-Raheem/tralive"> tralive </a> </h2> <h3> Tralive </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <h1> "Tralive" for MongoDB Atlas Hackathon</h1> <p>Using this website users can book their favourite tour destination. It is created in order to participate in the MongoDB Atlas Hackathon. <a href="https://tralive-faad8.web.app/" rel="nofollow">Visit Tralive</a></p> <h2> Category</h2> <p>This project is for the "Choose Your Own Adventure" category for the MongoDB Atlas Hackathon.</p> <h2> Directories</h2> <p>This repo stores both the front-end and back-end of the project.</p> <p>Front-end files are located inside the ./src directory.</p> <p>Back-end files are located inside the ./server directory.</p> <h2> Technology Used</h2> <ul> <li> <p>Front-end</p> <ul> <li> <p>React.js</p> </li> <li> <p>React Bootstrap</p> </li> <li> <p>css3</p> </li> </ul> </li> <li> <p>Back-end</p> <ul> <li> <p>Node.js</p> </li> <li> <p>Express.js</p> </li> </ul> </li> <li> <p>Database</p> <ul> <li>MongoDB</li> </ul> </li> <li> <p>Authentication</p> <ul> <li>Firebase</li> </ul> </li> <li> <p>Deployment</p> <ul> <li> <p>Firebase (Front-end)</p> </li> <li> <p>Heroku (Back-end)</p> </li> </ul> </li> </ul> <h2> License &amp; Copyright</h2> <p>© Md. Abdur Raheem</p> <p>Licensed under <a href="https://github.com/Md-Abdur-Raheem/traliveLICENSE">Apache License Version 2.0, January 2004</a></p> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/Md-Abdur-Raheem/tralive">View on GitHub</a></div> <br> </div> <br> <p><a href="https://tralive-faad8.web.app/">Live-site</a></p> <h3> Technology Used </h3> <ul> <li>React.js, React Bootstrap, CSS3</li> <li>Node.js , Express</li> <li>Firebase Auth.</li> <li>MongoDB Atlas</li> </ul> <h3> Additional Resources / Info </h3> <p>I have used MongoDB atlas to store all of my Destinations as well Bookings &amp; Users data. I have done CRUD operation to get, read, write and delete data from my backend server.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--b4CFH85t--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84svt7i39q82az0qjzxw.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--b4CFH85t--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84svt7i39q82az0qjzxw.jpg" alt="All destinations data" width="880" height="431"></a></p> <p>In the above screenshots I have used a get request to my backend server to get all of the available travel destinations form MongoDB Atlas.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--lQ69iqC1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy59iliwgrfegud75thn.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lQ69iqC1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy59iliwgrfegud75thn.jpg" alt="destination booking" width="880" height="429"></a></p> <p>In the booking destination page a user can book their desired place which is done by a post request in my server to MongoDB Atlas.</p> <p>In this website there is full control of admin panel.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IBIOc2Ol--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zli6uhqqvslst206ide.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IBIOc2Ol--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zli6uhqqvslst206ide.jpg" alt="admin panel/addDestination" width="880" height="433"></a></p> <p>An admin can add or remove any destination place. He/She can cancel a user's booking. He/She can make another user an admin as well as can remove an admin. All these have been possible by some CRUD operation with MongoDB Atlas.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ghpfmy2P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbziwgooymshbfejojog.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ghpfmy2P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbziwgooymshbfejojog.jpg" alt="Contact form" width="880" height="430"></a></p> <p>There is a fully functional contact form by which an user can easily contact with "Tralive" administrators.</p> <p><a href="https://github.com/ajyounguk/mongodb-crud-client">This</a> project is also following my workflow.</p> <h2> Deployment </h2> <ul> <li>Firebase for front-end hosting.</li> <li>Heroku for back-end hostiong.</li> </ul> atlashackathon