* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
		
			
				
	
	
		
			120 lines
		
	
	
		
			3.9 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			120 lines
		
	
	
		
			3.9 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| ---
 | |
| id: bd7158d8c443edefaeb5bd0e
 | |
| title: URL Shortener Microservice
 | |
| challengeType: 4
 | |
| forumTopicId: 301509
 | |
| dashedName: url-shortener-microservice
 | |
| ---
 | |
| 
 | |
| # --description--
 | |
| 
 | |
| Build a full stack JavaScript app that is functionally similar to this: <https://url-shortener-microservice.freecodecamp.rocks/>. Working on this project will involve you writing your code using one of the following methods:
 | |
| 
 | |
| -   Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-urlshortener/) and complete your project locally.
 | |
| -   Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-urlshortener) to complete your project.
 | |
| -   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
 | |
| 
 | |
| When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your projects source code in the `GitHub Link` field.
 | |
| 
 | |
| # --instructions--
 | |
| 
 | |
| **HINT:** Do not forget to use a body parsing middleware to handle the POST requests. Also, you can use the function `dns.lookup(host, cb)` from the `dns` core module to verify a submitted URL.
 | |
| 
 | |
| # --hints--
 | |
| 
 | |
| You should provide your own project, not the example URL.
 | |
| 
 | |
| ```js
 | |
| (getUserInput) => {
 | |
|   assert(
 | |
|     !/.*\/url-shortener-microservice\.freecodecamp\.rocks/.test(
 | |
|       getUserInput('url')
 | |
|     )
 | |
|   );
 | |
| };
 | |
| ```
 | |
| 
 | |
| You can POST a URL to `/api/shorturl` and get a JSON response with `original_url` and `short_url` properties. Here's an example: `{ original_url : 'https://freeCodeCamp.org', short_url : 1}`
 | |
| 
 | |
| ```js
 | |
| async (getUserInput) => {
 | |
|   const url = getUserInput('url');
 | |
|   const urlVariable = Date.now();
 | |
|   const fullUrl = `${url}/?v=${urlVariable}`
 | |
|   const res = await fetch(url + '/api/shorturl', {
 | |
|     method: 'POST',
 | |
|     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
 | |
|     body: `url=${fullUrl}`
 | |
|   });
 | |
|   if (res.ok) {
 | |
|     const { short_url, original_url } = await res.json();
 | |
|     assert.isNotNull(short_url);
 | |
|     assert.strictEqual(original_url, `${url}/?v=${urlVariable}`);
 | |
|   } else {
 | |
|     throw new Error(`${res.status} ${res.statusText}`);
 | |
|   }
 | |
| };
 | |
| ```
 | |
| 
 | |
| When you visit `/api/shorturl/<short_url>`, you will be redirected to the original URL.
 | |
| 
 | |
| ```js
 | |
| async (getUserInput) => {
 | |
|   const url = getUserInput('url');
 | |
|   const urlVariable = Date.now();
 | |
|   const fullUrl = `${url}/?v=${urlVariable}`
 | |
|   let shortenedUrlVariable;
 | |
|   const postResponse = await fetch(url + '/api/shorturl', {
 | |
|     method: 'POST',
 | |
|     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
 | |
|     body: `url=${fullUrl}`
 | |
|   });
 | |
|   if (postResponse.ok) {
 | |
|     const { short_url } = await postResponse.json();
 | |
|     shortenedUrlVariable = short_url;
 | |
|   } else {
 | |
|     throw new Error(`${postResponse.status} ${postResponse.statusText}`);
 | |
|   }
 | |
|   const getResponse = await fetch(
 | |
|     url + '/api/shorturl/' + shortenedUrlVariable
 | |
|   );
 | |
|   if (getResponse) {
 | |
|     const { redirected, url } = getResponse;
 | |
|     assert.isTrue(redirected);
 | |
|     assert.strictEqual(url,fullUrl);
 | |
|   } else {
 | |
|     throw new Error(`${getResponse.status} ${getResponse.statusText}`);
 | |
|   }
 | |
| };
 | |
| ```
 | |
| 
 | |
| If you pass an invalid URL that doesn't follow the valid `http://www.example.com` format, the JSON response will contain `{ error: 'invalid url' }`
 | |
| 
 | |
| ```js
 | |
| async (getUserInput) => {
 | |
|   const url = getUserInput('url');
 | |
|   const res = await fetch(url + '/api/shorturl', {
 | |
|     method: 'POST',
 | |
|     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
 | |
|     body: `url=ftp:/john-doe.org`
 | |
|   });
 | |
|   if (res.ok) {
 | |
|     const { error } = await res.json();
 | |
|     assert.isNotNull(error);
 | |
|     assert.strictEqual(error.toLowerCase(), 'invalid url');
 | |
|   } else {
 | |
|     throw new Error(`${res.status} ${res.statusText}`);
 | |
|   }
 | |
| };
 | |
| ```
 | |
| 
 | |
| # --solutions--
 | |
| 
 | |
| ```js
 | |
| /**
 | |
|   Backend challenges don't need solutions, 
 | |
|   because they would need to be tested against a full working project. 
 | |
|   Please check our contributing guidelines to learn more.
 | |
| */
 | |
| ```
 |