adam-kaplan / schoolyb-capstone Goto Github PK

Welcome to The International Data Matrix (TIDM) Documentation. This started as a capstone project for my coding boot camp but I want to see it grow and see others use it.

This project is still a work in progress. That being said nothing is finalized and all code is subject to change.

Being such a fan of history and geography. I thought it best to make this project not only to challenge myself but also give myself a reason to stay motivated throughout the process.

"Find something you love to do and you'll never work a day in your life."

-Anonymous

This project is a SPA(single page application) was done in Vanilla JavaScript. Our boot camp PROHIBITED the use of certain softwares, frameworks, and libraries including but not limited to:

• React
• Angular
• Vue
• Svelte
• Sass
• Tailwind CSS
• Bootstrap

Or anything similar to the tools listed above

My understanding of that decision is so that we(the students) focus on vanilla HTML/CSS & JavaScript so when the time comes to learn those new tools we are already ahead rather that starting completely from scratch. The following list contains the specific tools for the tech stack that I used for this project:

• VS Code
• NodeJS
• npm The following npm packages
  • serve
  • html-literal
  • parcel
  • lodash
  • navigo
  • dotenv
  • nodemon
  • mongoose
• The lit-html vscode extension
• Express.js
• Netlfiy
• Insomnia
• MongoDB
• Render

So with all of that out of the way lets talk about what TIDM is. The International Data Matrix is a web app developed by Marshall Burns a.k.a Schooly. The application is meant to act as a central place on the internet that anyone can access to gain historical, cultural, religious, geographical, geo-economical and geo-political understanding about any country in the world and the people that reside in them; Without having to go through the clutter of wikipedia or have multiple google tabs open. Another key function of this app WILL be the built in translator. An example of each page will be given to explain how the application works. These examples will be provided in the form of screenshots. There will also be code snippets to explain in greater detail how this SPA was made.

As mentioned in The How section one of the stipulations for this project was that I could not use any frameworks/libraries like React, Angular, Vue, Svelte, etc. Because of that the SPA had to be built using vanilla JavaScript components, views, state, and bundled all up with Parcel. Below are examples of the projects code directory structure.

Click here to visit the "components" directory

Click here to visit the "views" directory

Click here to visit the "store' Directory

*** NOTE THAT ALL SCREENSHOTS BELOW ARE A REPRESENTATION OF HOW THE APPLICATIONS PAGES OR "VIEWS" LOOKED WHEN CREATING THE DOCUMENTATION AND WILL BE UPDATED AS THE PAGES CONTINUE TO UPDATE ***

Anytime someone wants to access The IDM they will be taken to the the home page. At present the following elements on the home page can be interacted with :

• The "IDM" Logo/Nav button -

which is located in the top left corner of the page can be clicked and will open a the navigation menu on the left side of the screen.

• The Search Bar -

which is located in the top right corner of the page and is explained in the "The Search Bar" section below.

• The "View Countries" Button -

which is located beneath the welcome prompt located at the center of the screen and is explained in the "The View Countries Button" section below

• The Footer Icons - which located at the bottom of page/view. Currently there are four icons that will take the user to the following linked wep pages starting from left going right they are:
  • Home
  • Documentation
  • Translator
  • Contact

The search bar is one of my favorite elements of the application. The search bar is found on every page and currently acts as a quick and easy tool the user can use to enter letters or full names of a country; once the user is has finished entering that text they can click the enter key on their keyboard or click the globe icon located to the right the bar to populate all countries whose name fits that search on screen. *** Please Note that at least one letter is required before you can click the globe icon or the enter key ***. In the future I hope to add population, gross domestic product, and regional/continental location filtering to this feature.

The search bar allows the user to enter a series of letters to search for a country. For example if the user wants to learn more about the "USA" they could simply type "usa" and press enter or click the search button next to the input field; any country that has the letters that the user entered in that particular order will populate on screen. If the user entered "us" any country with the letters "u" and "s" in that order in its name would populate in screen. For example: Australia & Belarus.

The search bar works the same way with singular letters. IF the user wants to to search through any country that has a "u" in its name they can simply type "u" and once they press enter and country with "u" in its name no matter where the letter is will populate on screen. For example: Australia, Belarus, Sudan, Usa, & Venezuela.

When clicked the View Countries button on the home screen will take the user to the country selection page where they have will be able to choose from a full list of countries that are currently supported withing the application.