The latest articles on Forem by Pau Rodriguez Molina (@silinde87). https://forem.com/silinde87 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%2F766413%2F4b72afb4-47e9-444c-811f-1b1e0d688aed.jpeg https://forem.com/silinde87 en Pau Rodriguez Molina Sat, 18 Dec 2021 13:05:19 +0000 https://forem.com/silinde87/e-commerce-using-mongodb-and-handlebars-4e8 https://forem.com/silinde87/e-commerce-using-mongodb-and-handlebars-4e8 <h3> Overview of My Submission </h3> <p>Online marketplace for freelance digital services where you can buy and sell gigs. You can hire a freelancer as well as work as one. </p> <p>Has implemented user profile including Google’s social login and it’s completely responsive.</p> <p>🔗 <a href="http://servicewall.herokuapp.com/" rel="noopener noreferrer">Live demo</a></p> <p>Built with:</p> <ul> <li>HTML / CSS / JavaScript / Handlebars</li> <li>npm / MongoDB / NodeJS / ExpressJS</li> <li>Stripe / Mapbox / Nodemailer / Cloudinary / PassportJS</li> </ul> <h3> Submission Category: </h3> <p>E-Commerce Creation</p> <h3> Link to Code </h3> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/Silinde87" rel="noopener noreferrer"> Silinde87 </a> / <a href="https://github.com/Silinde87/M2-Service-Wall" rel="noopener noreferrer"> M2-Service-Wall </a> </h2> <h3> CRUD Web App e-commerce made in JavaScript, NodeJS, ExpressJS and MongoDB. It's the second project for web development full stack bootcamp Ironhack. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">M2 -</h1> </div> <div class="markdown-heading"> <h2 class="heading-element">How it looks</h2> </div> <p>🔗 <a href="https://github.com/Silinde87/M2-Service-Wall" rel="noopener noreferrer">Live Demo</a></p> <a href="https://github.com/Silinde87/repo-media/blob/main/images/servicewall-screen1.png?raw=true" rel="noopener noreferrer"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FSilinde87%2Frepo-media%2Fraw%2Fmain%2Fimages%2Fservicewall-screen1.png%3Fraw%3Dtrue" width="120px" height="260px"> </a> <a href="https://github.com/Silinde87/repo-media/blob/main/images/servicewall-screen2.png?raw=true" rel="noopener noreferrer"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FSilinde87%2Frepo-media%2Fraw%2Fmain%2Fimages%2Fservicewall-screen2.png%3Fraw%3Dtrue" width="120px" height="260px"> </a> <a href="https://github.com/Silinde87/repo-media/blob/main/images/servicewall-screen3.png?raw=true" rel="noopener noreferrer"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FSilinde87%2Frepo-media%2Fraw%2Fmain%2Fimages%2Fservicewall-screen3.png%3Fraw%3Dtrue" width="120px" height="260px"> </a> <a href="https://github.com/Silinde87/repo-media/blob/main/images/servicewall-screen4.png?raw=true" rel="noopener noreferrer"> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2FSilinde87%2Frepo-media%2Fraw%2Fmain%2Fimages%2Fservicewall-screen4.png%3Fraw%3Dtrue" width="120px" height="260px"> </a> <div class="markdown-heading"> <h2 class="heading-element">Description</h2> </div> <p>Online marketplace for freelance digital services where you can buy and sell gigs. You can hire a freelancer as well as work as one.</p> <div class="markdown-heading"> <h2 class="heading-element">Built with</h2> </div> <ul> <li>HTML / CSS / JavaScript / Handlebars</li> <li>npm / MongoDB / NodeJS / ExpressJS</li> <li>Stripe / Mapbox / Nodemailer / Cloudinary / PassportJS</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">User Stories</h2> </div> <ul> <li> <strong>404</strong> - As users, we want to see a nice 404 error page when I go to a page that doesn’t exist so that we know it was our fault. 🙊</li> <li> <strong>500</strong> - As users, we want to see a nice 500 error page when the team behind the app brokes something and it's not our fault. 🦦</li> <li> <strong>Homepage</strong> - As users, we want to be able to access the homepage and select by category service and search by specific service. 🦁</li> <li> <strong>Category page</strong> - As users, we want to…</li> </ul> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/Silinde87/M2-Service-Wall" rel="noopener noreferrer">View on GitHub</a></div> </div> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyl83dh5z8zmb9lakq1fm.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyl83dh5z8zmb9lakq1fm.png" alt="Screenshot of ServiceWall"></a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0n5i9wmhm1b44mvlbso9.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0n5i9wmhm1b44mvlbso9.png" alt="Screenshot of ServiceWall"></a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foeh81tk8sgbn4ek6pez2.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foeh81tk8sgbn4ek6pez2.png" alt="Screenshot of ServiceWall"></a></p> javascript atlashackathon mongodb webdev Pau Rodriguez Molina Thu, 02 Dec 2021 07:20:12 +0000 https://forem.com/silinde87/cicd-react-app-template-with-cypress-and-jestrtl-github-actions-al7 https://forem.com/silinde87/cicd-react-app-template-with-cypress-and-jestrtl-github-actions-al7 <h3> My Workflow </h3> <p>This is a repository that can be used as a <strong>template for any React project</strong>. Context provider and consumer already configured.<br> Uses <a href="https://github.com/Silinde87/React-app-template-with-testing-and-pipeline/tree/main/.github/workflows">Github Actions</a> as a pipeline, to work with CI/CD using <strong>Cypress with snapshots for tests e2e</strong>, <strong>Jest/React Testing Library for unit testing</strong>, and also checks for <strong>eslint rules</strong>.</p> <p>Main packages and versions:</p> <ul> <li>react: 17.0.2</li> <li>react-router-dom: 6.0.2</li> <li>styled-components: 5.3.3</li> <li>eslint: 7.22.0</li> <li>prettier: 2.5.0</li> <li>cypress: 9.1.0</li> <li>cypress-plugin-snapshots: 1.4.4</li> </ul> <h3> Submission Category: </h3> <p>DIY Deployments</p> <h3> Yaml File or 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/Silinde87"> Silinde87 </a> / <a href="https://github.com/Silinde87/React-app-template-with-testing-and-pipeline"> React-app-template-with-testing-and-pipeline </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <h1> React Template with Github's Actions pipeline</h1> <p>This is a repository that can be used as a <strong>template for any React project</strong>. Context provider and consumer already configured Uses Github Actions as a pipeline, to work with CI/CD using <strong>Cypress with snapshots for tests e2e, Jest/React Testing Library for unit testing, and also checks for eslint rules</strong>.</p> <h2> Available Scripts</h2> <div class="snippet-clipboard-content position-relative overflow-auto"><pre><code>yarn install </code></pre></div> <p><strong>Install npm dependencies</strong>:</p> <div class="snippet-clipboard-content position-relative overflow-auto"><pre><code>yarn start </code></pre></div> <p><strong>Runs the app</strong> in the development mode. Open <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a> to view it in the browser.</p> <p>The page will reload if you make edits. You will also see any lint errors in the console:</p> <div class="snippet-clipboard-content position-relative overflow-auto"><pre><code>yarn test </code></pre></div> <p><strong>Launches the unit test runner</strong> (Jest/RTL) in the interactive watch mode.</p> <div class="snippet-clipboard-content position-relative overflow-auto"><pre><code>yarn test:coverages </code></pre></div> <p><strong>Launches the unit test runner</strong> (Jest/RTL) and shows a report of testing <strong>coverage</strong></p> <div class="snippet-clipboard-content position-relative overflow-auto"><pre><code>yarn cy:open:local </code></pre></div> <p><strong>Launches the e2e test runner</strong> (Cypress) in <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a> with snapshots turned off Change url and PREVIEW_ENV flag to use…</p> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/Silinde87/React-app-template-with-testing-and-pipeline">View on GitHub</a></div> </div> <h3> Additional Resources / Info </h3> <p>The github's actions yml files are located in <code>.github/workflows</code> folder and structured in three files. One for testing, one for linting and the last one for build the app.</p> <p>Thanks for reading. Feedback is appreciated. </p> actionshackathon21 javascript react webdev