Directme

Links

• Live App

• Client Repository

• Server repository

• Kanban / Project Board

About

Directme is a modern web directory. Users can find new websites and communities via hubs and tags. Hubs are nested categories that a user can move through until they find a topic of interest. Tags allow a user to search by keywords to find listings. Users can contribute listings with any number of imaginable tags. If the tags match a hub's nested link, the listing will be displayed there as well.

Future deployment will include:

• User accounts that can save hubs, listings, and tags in their favorites.
• Vote for the best listings in each hub.
• Sort and filter the hubs, listings, and tags.
• Become editors of a hub and currate the best links for others.
• and much, more. Check the Kanban / Project Board for a list of upcoming releases.

Technology

• ReactJS
• Express
• Postgres
• HTML5
• CSS3
• Mocha
• Chai
• Supertest
• Enzyme
• Jest

Screenshots

MainHubs View

MainListings View

MainTags View

Details

Each Component is housed within its own folder. I took the best effort to separate out reusable functions as needed. The hierarchy for the client is as follows:

Client-side Application

1. Components
   1. Landing Page --> // User greeted with an onboarding experience for their first time
      1. goBack --> // Landing-specific utility function to see the last message
      2. goForward --> // Landing-specific utility function to see the next message
      3. LandingPage2 --> // This houses the bulk of the landing page onboarding experience
      4. Message --> // The message that appears on the screen
   2. Primary App --> // This houses all of the main application
      1. Header
         1. HeaderTitle
         2. LocationBar --> // The breadcrumbs / location showing the deeply nested hubs a user enters
         3. SearchBar --> // Includes validation, calling to the API, and changing state
      2. Main
         1. AddTagForm --> // The input box, validation, API calls, and changing state for when a user adds a tag to a listing. Reusable
         2. CatListing --> // Lists a hub/category within the current hub. Reusable
         3. LinkListing --> // Lists an individual link. Reusable
         4. MainHubs --> // One of the major views of the website. Displays the hubs list
         5. MainListings --> // One of the major views of the website. Displays the listings list
         6. MainNav --> // Provides the user the option of switching between the major views.
         7. MainTags --> // One of the major views of the website. Displays the tags list
         8. SubmitButton --> // A button to submit links lives on every page on the application. Reusable
      3. SubmitListing --> // Submit form for listings including validation, API calls, state changes
   3. utils --> // *These are utility functions used across the application.
2. FutureComponents --> // Components under construction for future deployments
3. images
4. tests

Server-side Application

1. migrations
2. seeds
3. src
   1. router
      1. router-service --> // all knex functions that connect the node server to the postgres database
      2. router --> the endpoints for the server that connect the API calls to the router-service
   2. app --> // the express application including all middleware and connects the router
   3. config --> // configuration data
   4. server --> // entry point for the application. Starts the server and knex database
4. test