├── .gitignore
├── CONTRIBUTING.md
├── LICENSE.md
├── Procfile
├── README.md
├── package-lock.json
├── package.json
├── public
├── assets
│ ├── Alex.png
│ ├── Alondra.png
│ ├── Alyssha.jpg
│ ├── Bianca.jpg
│ ├── Brian.png
│ ├── Dana.jpg
│ ├── Erika.jpg
│ ├── Jacob.jpg
│ ├── JacobGood.jpg
│ ├── Sebastian.png
│ └── logo.svg
├── css
│ ├── normalize.css
│ └── style.css
└── js
│ └── main.js
├── resources.js
├── server.js
└── views
└── index.ejs
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Contributing
4 |
5 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
6 |
7 | Please make sure to follow our guidelines below before making any contributions.
8 |
9 | - [Contributing](#contributing)
10 | - [Understanding Coding-Resources-API branch structure](#understanding-coding-resources-api-branch-structure)
11 | - [Permanent Branches](#permanent-branches)
12 | - [Main](#main)
13 | - [Test](#test)
14 | - [Resources](#resources)
15 | - [How often should I stage changes?](#how-often-should-i-stage-changes)
16 | - [Where should I make my pull request to?](#where-should-i-make-my-pull-request-to)
17 | - [Creating an Issue](#creating-an-issue)
18 | - [How to make a PR](#how-to-make-a-pr)
19 |
20 | ## Understanding Coding-Resources-API branch structure
21 | ### Permanent Branches
22 | #### Main
23 | - This branch is reserved for tested versions of our code-base. Do not make a PR directly into this branch, as we require testing before we can confirm any feature.
24 |
25 |
26 |
27 | #### Test
28 | - This branch is used to test a collection of newly added features, which will eventually become a future iteration of our application after thoroughly testing for bugs and code/guideline consistency. If you are interested in creating your own feature, we suggest that you first open an issue here: https://github.com/the-api-administration/coding-resources-api/issues and wait for our team to respond to your message and approve the implementation. If you are interested in taking responsibility for the implementation, please assign yourself to the issue once you submit it, so that our team can note your interest.
29 |
30 |
31 |
32 | #### Resources
33 | - This branch is reserved for adding new resources to our resources.js file. When adding a resource, follow these styling guidelines or we will be unable to address your contribution.
34 |
35 | Resource Addition Guidelines:
36 |
37 | - The resource must strictly pertain to coding. Please do not include resources that represent non-coding-related content.
38 | - The resources provided must strictly pertain to specific coding related topics, technologies, and content. We will not accept resources that are too broad and/or do not provide a specific focus.
39 |
40 | Resource Styling:
41 |
42 | - Object values must contain single quotes only.
43 | - Keywords array should contain strings only.
44 | - Keywords are preferred in lower case.
45 | - Keywords must be specific. Do not include broad keywords such as 'guide', 'tutorial', 'information' or we will be unable to process your PR. Please opt for keywords that are specific to the content.
46 | - Description should be clear and concise.
47 |
48 | Resource Format:
49 |
50 | ```
51 | {
52 | name: 'resource name',
53 | url: 'url here',
54 | description: 'add a detailed description',
55 | keywords: ['each', 'keyword', 'should', 'be', 'a', 'string']
56 | },
57 | ```
58 |
59 |
60 |
61 | ## How often should I stage changes?
62 |
63 | We require that you stage your changes for each section of code you develop. Do not stage changes with a single large commit, or we will instantly close your pull request. We would like you to make commits for every task you complete in your code and avoid working through multiple files when possible. Your commit message should include a detailed view of the work you are implementing and an issue you are solving if you have assigned yourself to an issue.
64 |
65 |
66 |
67 | ## Where should I make my pull request to?
68 |
69 | Never make a pull request into our main branch. If you plan on adding a feature, wait until you have completely finished that feature and then make a pull request into "test" with a clear description of the issue you are solving. If you are planning on adding a resource, please make a pull request to the resources branch.
70 |
71 |
72 |
73 | ## Creating an Issue
74 |
75 | We'd love to hear your advice, feature suggestions and/or read about any bugs you've encountered. Please create an issue here: https://github.com/the-api-administration/coding-resources-api/issues. If you wish to implement a feature on your own, please add yourself as an assignee to the issue you create, so that we can note your interest. When creating an issue, please attempt to outline in detail the topic of the issue, and a thorough description of what the issue attempts to solve.
76 |
77 | If you have encountered a bug, please provide as much information as you can to help us replicate the issue on our own end. Depending on the issue, it may be useful to communicate your browser, screen width, and/or anything that relates to your specific encounter.
78 |
79 |
80 |
81 | ## How to make a PR
82 |
83 | If you want to help us improve our API, please fork the repo and follow these steps before creating a pull request.
84 |
85 | 1. Visit [our Issues](https://github.com/the-api-administration/coding-resources-api/issues) page to check if an issue exists and does not yet have an assignee. Assign yourself to the issue if you find what you are planning to solve.
86 | 2. Fork the Project
87 | 3. Clone your fork on your local device. The link can be found under the code drop-down at the base of your fork (`git clone `)
88 | 4. If you are adding a resource, please skip to step 6.
89 | 5. Create a new branch for your Feature (`git branch AmazingFeature`)
90 | 6. Switch to the branch you are working on (`git checkout AmazingFeature`)
91 | 7. Make your changes, commit after every isolated task.
92 | 8. Add all of your changes (`git add ` or `git add .`). Do not push any changes to dependencies unless the Issue calls for it.
93 | 9. Commit your changes with a detailed description (`git commit -m 'added a, solved b, etc...'`)
94 | 10. Push to the Branch (`git push origin AmazingFeature`)
95 | 11. Open a Pull Request and follow the rules under "Where should I make my pull request to?"
96 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 the-api-administration
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: node server.js
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Coding-Resources-API
2 |
3 |
4 |
5 | [![Contributors][contributors-shield]][contributors-url]
6 | [![Forks][forks-shield]][forks-url]
7 | [![Stargazers][stars-shield]][stars-url]
8 | [![Pull Requests][pullrequests-shield]][pullrequests-url]
9 | [![Issues][issues-shield]][issues-url]
10 | [![MIT License][license-shield]][license-url]
11 |
12 |
13 |
14 |
51 |
52 |
53 |
54 |
55 |
56 | ## About The Project
57 |
58 | Search for coding resources by relevant keywords. This API serves educational content for a wide variety of computer science topics, languages and technologies relevant to web development.
59 |
60 |
71 |
72 |
73 |
74 | ## Getting Started
75 |
76 | Simply visit: https://coding-resources-api.up.railway.app/ and read our documentation to learn how to interact with our API! If you would like to help us out, feel free to create issues through our github repo.
77 |
78 |
87 |
88 |
89 |
90 | ## Roadmap
91 |
92 | - [X] Add search functionality
93 | - [ ] Offer more resources
94 | - [X] Support mobile devices
95 | - [ ] Create more endpoints
96 |
97 | See the [open issues](https://github.com/the-api-administration/coding-resources-api/issues) for a full list of proposed features (and known issues).
98 |
99 |
100 |
101 |
102 |
103 | ## Contributing
104 |
105 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
106 |
107 | Please visit `CONTRIBUTING.md` to read about our guidelines before making a contribution to our project. Thank you!
108 |
109 |
78 | `;
79 |
80 | list.appendChild(li);
81 | });
82 | } else {
83 | // Display "No matches were found" in result-list
in the DOM
84 | const li = document.createElement('li');
85 | li.innerText = 'No matches were found.';
86 | list.appendChild(li);
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/resources.js:
--------------------------------------------------------------------------------
1 | const resources = [
2 | {
3 | name: 'Oh Shit, Git!',
4 | url: 'https://ohshitgit.com/',
5 | description: 'A guide to git commands',
6 | keywords: ['git', 'version control', 'command line'],
7 | },
8 | {
9 | name: 'Javascript.info - Arrays',
10 | url: 'https://javascript.info/array',
11 | description: 'An informative article on arrays',
12 | keywords: ['arrays', 'javascript'],
13 | },
14 | {
15 | name: 'Building a Simple CRUD App with Node, Express, and MongoDB',
16 | url: 'https://zellwk.com/blog/crud-express-mongodb/',
17 | description: 'A comprehensive tutorial on how to build a CRUD app that lets you track a list of quotes from Star Wars characters using Node, Express and MongoDB ',
18 | keywords: ['mongodb', 'express', 'node', 'backend', 'javascript'],
19 | },
20 | {
21 | name: 'Useful string methods',
22 | url: 'https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods',
23 | description: 'An article on the useful operations that can be done on strings with built-in methods',
24 | keywords: ['string methods', 'javascript'],
25 | },
26 | {
27 | name: 'The JavaScript Way',
28 | url: 'https://github.com/thejsway/thejsway',
29 | description: 'A book that aims to be a useful companion for anyone wishing to (re)discover the many facets of JavaScript',
30 | keywords: ['javascript'],
31 | },
32 | {
33 | name: 'First Timers Only: Beginner Guide to Open Source',
34 | url: 'https://www.firsttimersonly.com/',
35 | description: 'Friendly open source projects for code-newbies',
36 | keywords: ['open source', 'code newbies'],
37 | },
38 | {
39 | name: 'A Complete Guide to Flexbox',
40 | url: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/',
41 | description: 'A complete guide that explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart',
42 | keywords: ['css', 'flexbox', 'properties', 'parent element', 'child element', 'flex items'],
43 | },
44 | {
45 | name: 'Learn to Code HTML & CSS',
46 | url: 'https://learn.shayhowe.com/html-css/',
47 | description: 'Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development',
48 | keywords: ['css', 'html', 'shay howe'],
49 | },
50 | {
51 | name: 'CSS-Tricks',
52 | url: 'https://css-tricks.com/',
53 | description: 'Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.',
54 | keywords: ['css'],
55 | },
56 | {
57 | name: 'All About Floats',
58 | url: 'https://css-tricks.com/all-about-floats/',
59 | description: 'An article about float concepts',
60 | keywords: ['css', 'floats']
61 | },
62 | {
63 | name: 'JavaScript Arrays: Explain Like I\'m Five',
64 | url: 'https://sumudusiriwardana.hashnode.dev/javascript-arrays-explain-like-im-five',
65 | description: 'A hashnode blog article that explains the basics of arrays and array methods',
66 | keywords: ['arrays', 'methods', 'basics', 'fundamentals', 'javascript'],
67 | },
68 | {
69 | name: 'Objects vs. Arrays',
70 | url: 'https://medium.com/@zac_heisey/objects-vs-arrays-42601ff79421',
71 | description: 'An article explaining the basic differences between objects and arrays',
72 | keywords: ['arrays', 'basics', 'fundamentals', 'javascript', 'objects'],
73 | },
74 | {
75 | name: 'Flexbex Zombies',
76 | url: 'https://mastery.games/flexboxzombies/',
77 | description: 'In this game you control a Hoodie character with a crossbow, using Flexbox code. The goal is to learn Flexbox in order to survive the onslaught of zombies.',
78 | keywords: ['css', 'flexbox'],
79 | },
80 | {
81 | name: 'A Complete Guide to CSS Media Queries',
82 | url: 'https://css-tricks.com/a-complete-guide-to-css-media-queries/',
83 | description: 'A guide to media queries, which can modify the appearance (and even behavior) or a website or app based on a matched set of conditions about the user’s device, browser or system settings.',
84 | keywords: ['css', 'media queries', 'responsive web design', 'responsive']
85 | },
86 | {
87 | name: 'A Complete Guide to Grid',
88 | url: 'https://css-tricks.com/snippets/css/complete-guide-grid/',
89 | description: 'Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.',
90 | keywords: ['css', 'css grid', 'grid']
91 | },
92 | {
93 | name: 'Objects',
94 | url: 'https://javascript.info/object',
95 | description: 'An article on the basics of objects',
96 | keywords: ['javascript', 'objects']
97 | },
98 | {
99 | name: 'Crypto Zombies',
100 | url: "https://cryptozombies.io",
101 | description: 'CryptoZombies is an interactive school that teaches you all things technical about blockchains. Learn to make smart contracts in Solidity by making your own crypto-collectibles game.',
102 | keywords: ["crypto", "web3", "blockchain"]
103 | },
104 | {
105 | name: 'How to make your first pull request on GitHub',
106 | url: "https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3/",
107 | description: 'A step by step guide on how to make your first pull request',
108 | keywords: ["open source", "git", "pull request"]
109 | },
110 | {
111 | name: 'CORS Proxy',
112 | url: 'https://codetabs.com/cors-proxy/cors-proxy.html',
113 | description: 'A CORS proxy is a service that allows developers (probably you) to access resources from other websites, without having to own that website. Be careful when you use them! (Jacob).',
114 | keywords: ['cors', 'proxy', 'api', 'errors']
115 | },
116 | {
117 | name: 'How to write good commit messages',
118 | url: 'https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/',
119 | description: 'An article on how to create a useful revision history by creating an agreed upon commit message convention to use. This applies to both personal and professional projects.',
120 | keywords: ['git', 'commit', 'version control', 'command line']
121 | },
122 | {
123 | name: 'Grind 75 questions',
124 | url: 'https://www.techinterviewhandbook.org/grind75',
125 | description: 'Grind 75 is a better version of Blind 75 which goes beyond 75 questions. You can customize the available time you have, difficulty, topics, etc.',
126 | keywords: ['interview', 'job search', 'coding challenges', 'leet code']
127 | },
128 | {
129 | name: 'Font Awesome',
130 | url: 'https://faicons.com/',
131 | description: 'Font Awesome is the Internet\'s icon library and toolkit, used by millions of designers, developers, and content creators.',
132 | keywords: ['icons', 'frontend']
133 | },
134 | {
135 | name: 'Frontend Project README template',
136 | url: 'https://github.com/alecortega/portfolio-template',
137 | description: 'A template to get started with your next portfolio README',
138 | keywords: ['markdown', 'frontend', 'documentation']
139 | },
140 | {
141 | name: 'CSS Diner',
142 | url: 'https://flukeout.github.io/',
143 | description: 'A fun game to learn and practice CSS Selectors! Selectors are how you pick which element to apply styles to.',
144 | keywords: ['css', 'game', 'selectors']
145 | },
146 | {
147 | name: 'Flexbox Froggy',
148 | url: 'https://flexboxfroggy.com/',
149 | description: 'Flexbox Froggy is a game for learning CSS flexbox. It is a fun way to learn how to format web content.',
150 | keywords: ['css', 'flexbox', 'game']
151 | },
152 | {
153 | name: 'Learn Git Branching',
154 | url: 'https://learngitbranching.js.org/',
155 | description: '"Learn Git Branching" is the most visual and interactive way to learn Git on the web; you\'ll be challenged with exciting levels, given step-by-step demonstrations of powerful features, and maybe even have a bit of fun along the way.',
156 | keywords: ['git', 'version control', 'branching', 'github']
157 | },
158 | {
159 | name: 'What the Flexbox',
160 | url: 'https://flexbox.io/',
161 | description: 'A simple, free 20 video course that will help you master CSS Flexbox! The first 13 videos are aimed at understanding the fundamentals of Flexbox - we will take a deep dive into understanding rows, columns, axes, wrapping, alignment, centering and layout. The last 7 are code alongs where we will build everything from a navigation to a mobile app layout entirely with Flexbox!',
162 | keywords: ['css', 'flexbox', 'video course', 'alignment', 'styling']
163 | },
164 | {
165 | name: 'Code Driven Animation Editor',
166 | url: 'https://www.timelinecss.io/',
167 | description: 'The CSS file is the "source of truth" for the project. This CSS source code can be edited directly, and changes will be reflected in the live preview and the timeline view immediately',
168 | keywords: ['css animations', 'editor', 'visuals']
169 | },
170 | {
171 | name: 'Simple Icons',
172 | url: 'https://simpleicons.org',
173 | description: 'A collection of free SVG icons for your website or web application project',
174 | keywords: ['svg icons', 'icons', 'popular brands']
175 | },
176 | {
177 | name: 'JavaScript Visualizer 9000',
178 | url: 'https://www.jsv9000.app',
179 | description: 'A tool for visualizing execution content, hoisting, closures and scopes in JavaScript',
180 | keywords: ['javascript', 'call stack', 'event loop', 'microtask queue', 'task queue']
181 | },
182 | {
183 | name: 'unDraw',
184 | url: 'https://undraw.co',
185 | description: 'A constantly updated design project with beautiful SVG images that you can use completely free and without attribution.',
186 | keywords: ['open-source illustrations', 'svg', 'images', 'design', 'graphics', 'art', 'vectors', 'minimal', 'free', 'modern', 'png', 'interface', 'open-source']
187 | },
188 | {
189 | name: 'DevDocs',
190 | url: 'https://devdocs.io',
191 | description: 'DevDocs is an open source web app that combines documentation for lots of developer tools into a single searchable interface',
192 | keywords: ['api documentation', 'free', 'open-source', 'developer tools', 'interface', 'offline', 'css', 'html', 'http', 'javascript', 'web apis', 'angular', 'angularjs', 'ansible', 'apache http server', 'apache pig', 'async', 'babel', 'backbone.js','bash', 'bluebird', 'bootstrap', 'bottle', 'bower', 'c', 'c++', 'cakephp', 'chai', 'chef', 'clojure', 'cmake', 'codeception', 'codeceptjs', 'codeigniter', 'coffeescript', 'composer','cordova', 'crystal','cypress','d','d3.js', 'dart', 'deno', 'django', 'django rest framework', 'docker', 'dojo', 'drupal', 'eigen3', 'electron', 'elisp', 'elixir', 'ember.js', 'enzyme', 'erlang', 'esbuild', 'eslint', 'express', 'falcon', 'fish', 'flask', 'flow', 'gcc', 'git', 'gnu fortran', 'gnu make', 'gnucobol','gnuplot', 'go', 'godot', 'graphite', 'groovy', 'grunt', 'gtk', 'handlebars', 'haproxy', 'haskell', 'haxe', 'homebrew', 'i3', 'immutable.js', 'influxdata', 'jasmine', 'jekyll', 'jest', 'jinja', 'jq', 'jquery', 'jquery mobile', 'jquery ui', 'jsdoc', 'julia', 'knockout.js', 'koa', 'kotlin', 'kubectl', 'kubernetes', 'laravel', 'latex', 'leaflet', 'less', 'liquid', 'lodash', 'lua', 'love', 'mariadb', 'marionette.js', 'markdown', 'matplotlib', 'meteor', 'mocha', 'modernizr', 'moment.js', 'mongoose', 'nginx', 'nginx lua module', 'nim', 'nix', 'node.js', 'nokogiri', 'npm', 'numpy', 'ocaml', 'octave', 'openjdk', 'opentsdb', 'padrino', 'pandas', 'perl', 'phalcon', 'phaser', 'phoenix', 'php', 'phpunit', 'pointcloudlibrary', 'pony', 'postgresql', 'prettier', 'pug', 'puppeteer', 'pygame', 'python', 'pytorch', 'q', 'qt', 'r', 'ramda', 'react', 'reactbootstrap', 'react native', 'react router', 'reactivex', 'redis', 'redux', 'relay', 'requirejs', 'rethinkdb', 'ruby', 'ruby minitest', 'ruby on rails', 'rust', 'rxjs', 'saltstack', 'sass', 'scala', 'scikit-image', 'scikit-learn', 'sequelize', 'sinon.js', 'socket.io', 'spring boot', 'sqlite', 'statsmodels', 'support tables', 'svg', 'symfony', 'tailwind css', 'tcl tk', 'tensorflow', 'tensorflow c++', 'terraform' , 'trio', 'twig', 'typescript', 'underscore.js', 'vagrant', 'vite', 'vue router', 'vue.js', 'vuex', 'vulkan', 'web extensions', 'webpack', 'werkzeug', 'wordpress', 'xslt & xpath', 'yarn', 'yii']
193 | },
194 | {
195 | name: 'Picular',
196 | url: 'https://picular.co',
197 | description: 'Picular is a rocket fast primary color generator using Google\'s image search. If you ever needed the perfect yellow hex code from a banana, this is the tool for you!',
198 | keywords: ['color', 'palette', 'color palette', 'primary color generator', 'fast', 'google image search', 'generator', 'hex codes']
199 | },
200 | {
201 | name: 'Canva Wireframe Templates',
202 | description: 'Browse high-quality Wireframe templates for your next design',
203 | url: 'https://www.canva.com/templates/?query=wireframe',
204 | keywords: ['canva', 'wireframe', 'template', 'prototype', 'project', 'design']
205 | },
206 | {
207 | name: 'Python Tutor: Visualize Code in Python, JavaScript, C, C++, and Java',
208 | description: 'This coding tutor tool helps you learn Python, JavaScript, C, C++, and Java by visualizing code execution. You can use it to debug your homework assignments and as a supplement to online coding tutorials.',
209 | url: 'https://pythontutor.com/visualize.html#mode=edit',
210 | keywords: ['code', 'visualize','python', 'javascript', 'c', 'c++', 'javascript', 'java', 'visualize execution', 'coding tutor', 'debug','supplement', 'recursion', 'execution', 'frames', 'objects', 'steps']
211 | },
212 | {
213 | name: 'Unscreen',
214 | url: 'https://www.unscreen.com',
215 | description:'100% automatic and free video background remover',
216 | keywords: ['remove video background', 'free', 'hd', 'no watermark', 'api plugins', 'plugins', 'clips', 'video file', 'audio', 'gif', 'presentation', 'remove', '.mp4', '.mov', '.gif', 'url', 'footage', 'record', 'video editing']
217 | },
218 | {
219 | name: 'Quicktools by Picsart',
220 | url: 'https://tools.picsart.com/image/background-remover/',
221 | description: 'Tool to remove backgrounds of images',
222 | keywords: ['remove', 'background remover', 'image', 'picture', 'transparent', 'ai', 'free', 'refine', 'backgrounds', 'shadows', 'borders']
223 | },
224 | {
225 | name: 'Squoosh',
226 | url: 'https://squoosh.app',
227 | description: 'Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.',
228 | keywords: ['compress image', 'reduce file size', 'reduce', 'high quality', 'image', 'smaller file', 'file size', 'privacy', 'image optimizer', 'compress', 'codecs', 'resize', 'convert image', 'convert', 'free', 'open-source', 'pixels', 'real-time', 'jpg', 'png', 'webp', 'avif']
229 | },
230 | {
231 | name: 'Warp',
232 | url: 'https://www.warp.dev',
233 | description: 'Warp is a fully native, GPU-accelerated, Rust-based terminal. No Electron or web-tech. 60fps on 4K screens. Along the way, we built our own UI framework, our own Rust-based CRDT editor and our own graphics shaders.',
234 | keywords: ['terminal', 'gpu', 'crdt', 'rust', 'zsh', 'fish', 'bash', 'modern', 'development', 'code editor', 'writing code', 'code', 'commands', 'selections', 'cursor positioning', 'ai', 'shell commands', 'terminal sharing', 'customize', 'cli', 'command line']
235 | },
236 | {
237 | name: 'Uiverse',
238 | url: 'https://uiverse.io',
239 | description: 'Universe of UI elements to help you stand out. Open-source and free to use, just copy and paste! Order by favorites',
240 | keywords: ['ui elements', 'open-source', 'free', 'button', 'checkbox', 'toggle', 'switches', 'cards', 'loaders', 'inputs', 'css', 'html', 'hover', 'copy paste', 'cssbuttons']
241 | },
242 | {
243 | name: 'Loaders',
244 | url: 'https://cssloaders.github.io',
245 | description: 'CSS Loader is a collection of different types of loaders, spinners and their source code.',
246 | keywords: ['css', 'html', 'loaders', 'animations', 'speed', 'spinners', 'styling', 'pseudo elements', 'website', 'frontend']
247 | },
248 | {
249 | name: 'Postman',
250 | url: 'https://www.postman.com',
251 | description: 'Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.',
252 | keywords: ['api', 'api platform', 'data', 'api lifecycle', 'collaboration', 'design', 'build', 'test', 'iterate', 'documentation', 'workspace', 'rest api', 'accessibility', 'http requests', 'tracking']
253 | },
254 | {
255 | name: 'Screeps',
256 | url: 'https://screeps.com',
257 | description: 'Screeps World is an open source MMO RTS sandbox game for programming enthusiasts, wherein the core mechanic is programming your units AI. You control your colony by writing JavaScript which operates 24/7 in the single persistent open world filled by other players on par with you.',
258 | keywords: ['sandbox', 'game', 'open-source', 'ai', 'programming', 'javascript', 'mmo', 'rts', 'player', 'scripting', 'steam', 'multiplayer', 'strategy game', 'colony', 'resources', 'mine', 'units', 'territory']
259 | },
260 | {
261 | name: 'Oh My Posh',
262 | url: 'https://ohmyposh.dev',
263 | description: 'Oh My Posh is a custom prompt engine for any shell that has the ability to adjust the prompt string with a function or variable.',
264 | keywords: ['theme engine', 'shell', 'color', 'terminal', 'prompt', 'render', 'customizable', 'theme', 'powershell', 'windows', 'macos','linux', 'fonts', 'console', 'full color set', 'prompt string', 'function', 'variable']
265 | },
266 | {
267 | name: 'Compressor',
268 | url: 'https://compressor.io',
269 | description: 'Optimize and compress JPEG, PNG, SVG, GIF and WEBP images online. Compress, resize and rename your photos for free.',
270 | keywords: ['image compressor', 'image', 'fast', 'efficient', 'jpeg', 'png', 'svg', 'gif', 'webp', 'smaller images', 'faster website', 'optimized', 'seo', 'seo ranking', 'lighthouse', 'compression algorithm', 'shrink']
271 | },
272 | {
273 | name: 'tiny png',
274 | url: 'https://tinypng.com',
275 | description: 'TinyJPG reduces the file size of your JPEG images. Every uploaded image is analyzed to apply the best possible JPEG encoding. Based on the content of your image an optimal strategy is chosen. The result is a quality image without wasting storage or bandwidth!',
276 | keywords: ['image compressor', 'image', 'fast', 'efficient', 'jpeg', 'png', 'webp', 'smaller images', 'transparent image', 'faster website', 'optimized', 'seo', 'seo ranking', 'lighthouse', 'compression algorithm', 'shrink']
277 | },
278 | {
279 | name: 'Nerdy Data',
280 | url: 'https://www.nerdydata.com',
281 | description: 'NerdyData is a search engine for code. So you can plop in a bit of code from your website (ex: a Facebook tracking pixel snippet) and find all of the other sites on the internet that have that code on their website.',
282 | keywords: ['search engine', 'source-code', 'tech stack', 'code', 'companies', 'leads', 'integrations', 'api access', 'domain', 'domain lookup', 'seo', 'google analytics', 'images', 'badges', 'websites', 'competitors']
283 | },
284 | {
285 | name: 'Coolors',
286 | url: 'https://coolors.co/palettes/trending',
287 | description: 'Get inspired by thousands of beautiful color schemes and make something cool',
288 | keywords: ['color palettes', 'styles', 'hex values', 'color schemes', 'color combinations', 'design', 'free', 'css', 'generator']
289 | },
290 | {
291 | name: 'Name Cheap Logo Maker',
292 | url: 'https://www.namecheap.com/logo-maker/',
293 | description: 'Create a logo with our free logo maker. Make your own custom logo design for a website or business with Namecheap Logo Maker and download it free on any device.',
294 | keywords: ['logo', 'logo maker', 'free', 'creator', 'business', 'branding']
295 | },
296 | {
297 | name: 'Unsplash',
298 | url: 'https://unsplash.com',
299 | description: 'Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.',
300 | keywords: ['images', 'free', 'high-resolution', 'wallpapers', '3d renders', 'textures', 'patterns', 'experimental', 'architecture', 'nature', 'business and work', 'fashion', 'film', 'food', 'drink', 'street photography', 'arts and culture', 'royalty-free', 'stock photo', 'commercial', 'personal projects']
301 | },
302 | {
303 | name: 'Page Speed',
304 | url: 'https://pagespeed.web.dev',
305 | description: 'PageSpeed Insights (PSI) is performance focused, using both lab (Lighthouse) and field (Chrome UX Report) data to provide a summary of performance. Furthermore, PSI provides origin level insights in the field, whereas web. dev/measure is intended to deep-dive into a single URL in the lab ',
306 | keywords: ['page speed', 'web page', 'load time', 'browser request', 'seo', 'optimization']
307 | },
308 | {
309 | name: 'Cloud Convert',
310 | url: 'https://cloudconvert.com/jpg-to-webp',
311 | description: 'CloudConvert converts your image files online. Amongst many others, we support PNG, JPG, GIF, WEBP and HEIC.',
312 | keywords: ['jpg', 'webp', 'converter', 'heic', 'formats', 'high-quality', 'api']
313 | },
314 | {
315 | name: 'The Essential Meta Tags for Social Media',
316 | url: 'https://css-tricks.com/essential-meta-tags-social-media/',
317 | description: 'These days, almost every website encourages visitors to share its pages on social media. We’ve all seen the ubiquitous Facebook and Twitter icons, among others, just begging to be clicked. This comes as no surprise as sharing via social media, the internet incarnation of word-of-mouth, is one of the most effective ways for businesses and individuals to gain awareness.',
318 | keywords: ['metadata', 'metatag', 'thumbnail', 'social media']
319 | },
320 | {
321 | name: 'HTML Cheat Sheet',
322 | url: 'https://htmlcheatsheet.com/',
323 | description: 'Online interactive HTML Cheat Sheet contains useful code examples and web developer tools, markup generators and more.',
324 | keywords: ['HTML', 'cheat sheet', 'tags']
325 | },
326 | {
327 | name: 'CSS Cheat Sheet',
328 | url: 'https://htmlcheatsheet.com/css/',
329 | description: 'CSS Cheat Sheet contains the most common style snippets: CSS gradient, background, button, font-family, border, radius, box and text shadow generators',
330 | keywords: ['CSS', 'cheat sheet', 'box model', 'selectors', 'color picker']
331 | },
332 | {
333 | name: 'JS "JavaScript" Cheat Sheet',
334 | url: 'https://htmlcheatsheet.com/js/',
335 | description: 'JavaScript Cheat Sheet contains useful code examples on a single page. Not just a PDF because it\'s interactive! Find code for JS loops, variables, objects and more.',
336 | keywords: ['JS', 'Javascript', 'cheat sheet', 'conditionals', 'loops', 'variables', 'dates', 'events', 'functions', 'regex', 'json', 'promises', 'arrays']
337 | },
338 | {
339 | name: 'SEO Cheat Sheet',
340 | url: 'https://htmlcheatsheet.com/seo/',
341 | description: 'This online SEO cheat sheet lists everyting you need to know and do to rank your website as high as possible among the Google search results.',
342 | keywords: ['SEO', 'cheat sheet']
343 | },
344 | {
345 | name: 'SEO Guide to Lighthouse Performance Metrics',
346 | url: 'https://www.searchenginejournal.com/core-web-vitals/technical-seo-lighthouse/',
347 | description: 'Take a deep dive into Lighthouse performance metrics with technical SEO pros Jamie Indigo and Rachel Anderson.',
348 | keywords: ['SEO', 'lighthouse', 'performance', 'metrics']
349 | },
350 | {
351 | name: 'Centering in CSS',
352 | url: 'https://ishadeed.com/article/learn-css-centering/#:~:text=To%20center%20an%20inline%20element,is%20text%2Dalign%3A%20center%20.&text=For%20multiple%20inline%20elements%2C%20the,using%20text%2Dalign%3A%20center%20',
353 | description: 'A guide to everything you need to know about centering in CSS',
354 | keywords: ['CSS', 'center', 'align']
355 | },
356 | // Resource Format - please follow the styling below.
357 | // {
358 | // name: '',
359 | // url: '',
360 | // description: '',
361 | // keywords: ['']
362 | // },
363 | ];
364 |
365 | exports.resources = resources;
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const app = express();
3 | const cors = require('cors');
4 | const { resources } = require("./resources");
5 | const PORT = process.env.PORT || 8000;
6 |
7 | app.set('view engine', 'ejs')
8 | app.use(cors());
9 | app.use(express.static('public'));
10 |
11 | app.get('/', (req, res) => {
12 | if (resources) {
13 | res.render('index.ejs', { resources });
14 | } else {
15 | // respond with status 500 if the resources array could not be loaded from resources.js
16 | res.status(500).json({
17 | error: 'Resources were not able to be loaded from resources.js.'
18 | });
19 | }
20 | });
21 |
22 | app.get('/api', (req, res) => {
23 | res.json(resources);
24 | });
25 |
26 | app.get('/api/:keyword', (req, res) => {
27 | const keyword = req.params.keyword.toLowerCase();
28 |
29 | // filter resources array, return items that match query; tag.
30 | const matches = resources.filter((obj) => obj.keywords.some(str => str.toLowerCase().includes(keyword)));
31 |
32 | // if matches were found, respond with matches array in JSON format
33 | if (matches.length) {
34 | res.json(matches);
35 | } else {
36 | // respond with status 404, no matches were found
37 | res.status(404).json({
38 | error: `No resources were found with the ${keyword} keyword.`
39 | });
40 | }
41 | });
42 |
43 | app.listen(PORT, () => {
44 | console.log(`The 👨🏭 server 🚗 is 🏃♀️ running 👡 on ⚓ port 🐹 ${PORT}, 🛒 better 💅 go 😝 catch 🙀 it! 🍟`);
45 | });
46 |
--------------------------------------------------------------------------------
/views/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 | Resources API
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
25 |
26 |
27 |
28 |
32 |
33 |
34 |
Coding Resources API
35 |
36 | Serves educational content for a wide
37 | variety of computer science topics, languages and
38 | technologies relevant to web development.
39 | Search for coding resources by relevant keywords.
40 |
41 |
42 |
43 |
55 |
56 |
57 |
58 |
59 | <% for(let i = 0; i < resources.length; i++) { %>
60 |
17 | 
128 | 
139 | 
150 | 
163 | 
174 | 
185 | 
196 | 
209 | 
220 | 
231 |