Add API endpoints that allow a user to submit a URL and access a shortened version.
- What pieces of data do we care about storing? What if we wanted statistics?
- Should the data be mutable?
- How long should the shortened part of the URL be? Could it be dynamically sized?
Create a front end in React that allows for submitting a URL and displaying the shortened version.
- What is important to validate?
- How should the network requests be sent?
- How would we view statistics about a URL?
This section can be considered a nice-to-have. Add a scoreboard to the landing page displaying the top 5 URLs.
- You can choose to rank based on number of times requested vs number of times submitted
- config - "^3.2.4",
- express - "^4.17.1"
- metaget - "^1.0.6"
- mongoose - "^5.8.7"
- shortid - "^2.2.15",
- valid-url - "^1.0.9"
- axios - "^0.19.1",
- react - "^16.12.0",
- react-dom - "^16.12.0",
- react-scripts - "3.3.0",
- semantic-ui-react - "^0.88.2",
- valid-url - "^1.0.9"
-
Fork and clone repo into your machine
-
npm install cd client npm install cd ..
Click Connect Tab
Click Connect your Application Tab
Copy Connection String
- Using the default.example.json in /config as a guide create a default.json file and add in your connection string filling out the password section with your newly created user and password.
{
"mongoURI": "mongodb+srv://<user>:<password>@cluster0-cecdk.mongodb.net/test?retryWrites=true&w=majority",
"baseUrl": "http://localhost:5000"
}
-
Start up server and client by running conncurrently command
npm run dev -
You can now view client in the browser.
- Local: http://localhost:3000/
- On Your Network: http://10.0.0.108:3000/