SDIRC-Link-Shortener

• Overview
• MVP
  • Goals
  • Libraries and Dependencies
  • Client (Front End)
    • Wireframes
    • Component Tree
    • Component Architecture
    • Time Estimates
• Post-MVP
• Code Showcase
• Code Issues & Resolutions

Project Overview

SDIRC-Link-Shortener is a URL shortening web service, which provides short aliases for redirection of long URLs.

MVP

• The SDIRC-Link-Shortener MVP is a full CRUD, full stack application built using MongoDB, Express, React and Node. It is fully responsive, and styled using tailwindCSS.

Goals

• Full CRUD, REST API, built with Node
• Full CRUD interactive front end built with React
• Forms to authenticate users via Active Directory
• Forms to create and update shortUrl's
• Fully responsive styling with two media queries
• Clean, organized, and structured code

Libraries and Dependencies

Library	Description
cors	mechanism that allows servers to indicate origins from which a browser should permit loading resources
colors	color-management system used to style NodeJS console
dotenv	zero-dependency module used to load environment variables from a .env file into process.env.
express	back end web framework used for building RESTful APIs in Node.js
mongoose	data modeling library used to build schema-based solutions to model application data
valid-url	Check whether a string is a valid HTTP URL
react-router-dom	contains bindings for using React Router in web applications
axios	JS library used to make HTTP requests from node or XMLHttpRequests from the browser
react	front-end JavaScript library for building user interfaces

Client (Front End)

Wireframes

Link to Wireframes

• Mobile Sign In Screen

• Mobile Shorten URL Screen

• Mobile Shortened URL Screen

• Mobile Navigation Menu

• Mobile All URL's Screen

• Mobile URL Details Screen

• Mobile My URL's Screen

• Mobile My URl Details Screen

• Mobile Rename URL Screen

Component Tree

Link to Component Tree

• Mobile Component Tree

• Desktop Component Tree