The idea of our project was to build a web application that met the requirements of our project, would be functional and that we could build and keep as accessible as possible. We decided to create an event-search dashboard. The web application would host a number of events from different hobbies and interests across either across the globe or nation (depended on which third-party API) and could would enable users to purchase tickets for said event online.
Our motivation for creating this was to build a hub that sourced events, experiences and enjoyment for people to do easily and with minimal difficulty. The convenience that came with being able to find and research for your city and find events in different categories is something we felt would appeal to just about any adult in today’s world.
AS A developer
I WANT to be able to create an event search
dashboard where I can LOCATE, my city, FIND
an event AND BOOK tickets/reservations etc.
So THAT I can schedule something to do over the weekend.
Researching was integral part of the building process, we had to figure out which third-party API’s we wanted to use, what software we planned to use, it was quite literally the foundation of our entire web application.
A large part of our research involved setting aims and objectives which simultaneously went with the rest of the work that we were doing. Our end goal was to quite literally build a web application that allowed users to search for different kind of events by city so we spent a lot of the beginning of our project searching for soltuions, API’s and bootstrap code that allowed us to execute this.
This led us from the research stage to the visual and implementation stage, with a wireframe now rendered and complete, we could begin the building and web development part of our event search dashboard. It defined the elements of the site we wanted the web application to have without delving too deep into the look of it, it was a helpful and important framework.
Before starting development on our application, we started the visualisation of the structural elements of the website before the actual programming to get a better idea of the architecture of our site. We usedFigma to construct the wireframe and check the concept’s responsiveness across different devices and used this as our baseline for developing.
This is the stage we knew we would be spending the longest, bringing the research and the framework that the wireframe gave us to begin building the HTML, CSS and JavaScript that our web application would need.
This process was very much a continual and gradual build up, while it’s left as our final step, it commenced early as we needed visualr refrences as we built the frame (HTML etc.) to know what our users would be looking at when they came to interact with our final web application.
Download the project from GitHub repository on your local machine.
-
Open GitHub repository. (link to repository)
-
Select
Codefrom top navigation section. (reference on the image below) 👇
-
Select
<> Codedropdown button from sub section. (reference on the image below) 👇
-
Select
Download ZIPfrom dropdown menu to download project in .zip format. (reference on the image below) 👇 -
Unzip the project.
[!TIP] You can use 7-Zip if you don't have file archiver. 7-Zip is free software with open source. The most of the code is under the GNU LGPL license. Some parts of the code are under the BSD 3-clause License. Also there is unRAR license restriction for some parts of the code. Read 7-Zip License information. Download the application from official website.
-
Open project with VS Code or other IDE.
-
On GitHub.com, navigate to the main page of the repository. (link to repository).
-
Above the list of files, click Code. (reference on the image below) 👇
-
Copy the URL for the repository.
-
To clone the repository using HTTPS, under "HTTPS", click
-
To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH, then click
-
To clone a repository using GitHub CLI, click GitHub CLI, then click (reference on the image below) 👇
-
Open Git Bash.
-
Change the current working directory to the location where you want the cloned directory.
-
Type
git clone, and then paste the URL you copied earlier.git clone https://github.com/jaiminiprajapati/Project-01-Event-Search-Dashboard.git -
Press Enter to create your local clone.
$ git clone https://github.com/jaiminiprajapati/Project-01-Event-Search-Dashboard.git > Cloning into `Spoon-Knife`... > remote: Counting objects: 10, done. > remote: Compressing objects: 100% (8/8), done. > remove: Total 10 (delta 1), reused 10 (delta 1) > Unpacking objects: 100% (10/10), done.
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtime (such as C++, C#, Java, Python, PHP, Go, .NET).
VS Code extension counts blank lines, comment lines, and physical lines of source code in many programming languages. This extension uses other language extensions to determine the line of code. Therefore, you may need to install the language extension to support a new language. Conversely, as the number of language extensions increases, the range of support for this feature also increases.
root/ //
|----assets //
|----readme //
|----images //
|----default //
|----events //
|----music festivals //
|----js //
|----api //
|----creators //
|----renders //
|----res //
|----.gitignore //
|----index.html //
|----LICENSE //
|----README.md //
|----script.js //
|----style.css //
|----uiTemplate.html //
GET /api/items| Parameter | Type | Description |
|---|---|---|
OPENCAGEDATA_API_KEY |
string |
Required API key |
SEATGEEK_API_KEY |
string |
Required API key |
DATATHISTLE_API_KEY |
string |
Required API key |
| filename | language | code | comment | blank | total |
|---|---|---|---|---|---|
| README.md | Markdown | 78 | 0 | 55 | 133 |
| index.html | HTML | 342 | 24 | 27 | 393 |
| js/api/datathistle.js | JavaScript | 0 | 13 | 3 | 16 |
| js/api/seatgeek.js | JavaScript | 71 | 1 | 11 | 83 |
| js/api/userLocation.js | JavaScript | 19 | 0 | 2 | 21 |
| js/autocomleate.js | JavaScript | 0 | 29 | 6 | 35 |
| js/creators/searchBycategoryDropdown.js | JavaScript | 8 | 0 | 1 | 9 |
| js/creators/upcomingEventCard.js | JavaScript | 41 | 2 | 4 | 47 |
| js/renders/categorySearchDropdown.js | JavaScript | 7 | 0 | 1 | 8 |
| js/renders/filteredEventsbyCategory.js | JavaScript | 14 | 1 | 5 | 20 |
| js/renders/upcomingEventsSection.js | JavaScript | 5 | 0 | 1 | 6 |
| js/res/localeStorage.js | JavaScript | 9 | 0 | 3 | 12 |
| js/res/utils.js | JavaScript | 29 | 0 | 7 | 36 |
| script.js | JavaScript | 37 | 1 | 8 | 46 |
| style.css | CSS | 259 | 0 | 44 | 303 |
| uiTemplate.html | HTML | 443 | 24 | 30 | 497 |
Summary / Details / Diff Summary / Diff Details
| language | files | code | comment | blank | total |
|---|---|---|---|---|---|
| HTML | 2 | 785 | 48 | 57 | 890 |
| CSS | 1 | 259 | 0 | 44 | 303 |
| JavaScript | 12 | 240 | 47 | 52 | 339 |
| Markdown | 1 | 78 | 0 | 55 | 133 |
| path | files | code | comment | blank | total |
|---|---|---|---|---|---|
| . | 16 | 1,362 | 95 | 208 | 1,665 |
| . (Files) | 5 | 1,159 | 49 | 164 | 1,372 |
| js | 11 | 203 | 46 | 44 | 293 |
| js (Files) | 1 | 0 | 29 | 6 | 35 |
| js\api | 3 | 90 | 14 | 16 | 120 |
| js\creators | 2 | 49 | 2 | 5 | 56 |
| js\renders | 3 | 26 | 1 | 7 | 34 |
| js\res | 2 | 38 | 0 | 10 | 48 |