E Book
E Book
101 JAVASCRIPT
PROJECT IDEAS
Project Ideas for VaillaJS, React, React Native and Node
BY GEORGE FIELD
Copyright © 2019 by George Field
www.georgeafield.co.uk
Twitter - @GeorgeAField1
Description
Build a web page that shows the users location on a map and
displays the weather information underneath it. You can use
the Google Maps API to show the location of a user on the
Screen & ipapi.co to get the users location.
Documentation
Ipapi - https://ipapi.co/developers/
Description
Build a web page that has some tasks with a checkbox next
to it. Once a task is completed a progress bar should then fill
up bit by bit and the percentage that it fills up should be
based on the weight of the task.
Documentation
A starter template can be found here -
https://gist.github.com/cferdinandi/12c50d0b796fd3b733b8bb
87d21d071d
it that contains the basic html elements you will need to start
this project.
03 One Page Blog
Description
Create a one-page blog post using bootstrap that displays a
carousel of GitHub users underneath it. You should use vanilla
JS to make the carousel function and make request to the
github api. The blog must have a header section where an
image is positioned with some text over it, an article section
where the article resides, an about the author section where
the author information is found and the GitHub users carousel
underneath it at the bottom of the page. Check the UI design
given below to get a visual representation of the layout.
Documentation
Bootstrap - https://getbootstrap.com/
Github API - https://developer.github.com/v3/
04 Create a
an online store
Description
Documentation
There is no external documentation for this task. To give you
some tips, break down the UI design and focus on each part
individually. Make use of google, google is your friend!
05 Create a
quiz website
Description
Create a quiz website using the Open Trivia Database API and
JS. You can create a quiz using JavaScript but the data for the
questions comes from an API. To do this the page should
show a score, so that the user can see how many they have
correct, and one button to submit their answer and go to the
next. The score will be visible to the user throughout the quiz
so they will know if they got the answer wrong immediately
and there must be at least 10 questions.
Documentation
one-page
travel website
Description
AOS - https://michalsnik.github.io/aos
Bootstrap - https://getbootstrap.com/
07 Build a pop-up chat
window
Description
Documentation
Game using JS
Description
Build a Tic-Tac-Toe game using HTML, CSS and JS. This game
will get you writing a lot of code and will help your problem
solve by stringing lots of code together. It will also help you
understand DOM manipulation.
Documentation
Description
Create a web page which uses a search input and Giphy’s api
to display giphs on a page. The page should contain a search
input where the user can type in a query and a button to
initiate the search. The giphs that are returned from the api
call should be displayed under the search area.You will need
to use vanilla JS to make the api request and display the
results.
Documentation
with WebGL
Description
Documentation
inspiration - https://github.com/diogofferreira/pacman-3D
Node JS Projects
A common use of Node.js in the industry is to build
scaleable microserviceses. With this in mind, I have
created a mix of projects that will get you to build some of
these.
11 Static
page server
Description
Documentation
Express - https://expressjs.com/
12 Notifications Service
Description
A common service that a lot of systems have is some form of
notification service. These are normally what trigger push
notifications, emails, marketing info etc to be sent out. With
node we can set up an endpoint, that when hit, triggers an
email to be sent via the SendGrid API. To take this further you
could send custom templates using a template engine such
as handlebars.
Documentation
SendGrid - https://sendgrid.com/docs/for-developers/sending-
email/
SendGrid NPM package -
https://www.npmjs.com/package/@sendgrid/client
13 Chatroom
using Socket.io
Description
Websockets are commonly used when streaming data over
the internet in real time. Socket.io is a JavaScript library that is
built on top of this and is a great, fun tool that can be used to
create cool projects such as a chatroom.For this you will need
to create a html page that has a simple chat type window on
it. Create socket connections and you could even store the
conversations users have through your chat room to a
database.
Documentation
Socket.io - https://socket.io/
Description
Documentation
MongoDB - https://www.mongodb.com/
Mongoose - https://www.npmjs.com/package/mongoose
15 Create an order
microservice using
shopify
Description
As mentioned earlier, Microservices are a common
architectural design in modern system development.
Learning how to build one not only helps you learn how to
use node, but it also gets you coding something that will be
hugely impressive to an employer.To do this we are going to
use shopifys API as a way of creating orders and storing those
orders. We will create a service that has two endpoints. One to
create an order, the other two save the order.
Documentation
Shopify Order API -
https://help.shopify.com/en/api/reference/orders/order
Express - https://expressjs.com/
16 Build a simple
Description
Node also has some great packages that allow you to perform
web scraping tasks. Create a node script that scrapes the
content of a website for price data and then puts it into a text
file. To do this you can use the following packages – fs, cheerio
and puppeteer (if it’s a JavaScript based site, e.g react built).To
take this further, you could put the data into a SQL database
for you to query later.
Documentation
puppeteer - https://pptr.dev/
cheerio - https://cheerio.js.org/
17 Remote
Description
Documentation
Article - http://www.webondevices.com/arduino-nodejs-rc-
car-driven-with-html5-gamepad-api/
Socket.io - https://socket.io/
18 Build a Google
Cloud Vision
returned data
Description
Documentation
Google Vision API -
https://cloud.google.com/vision/overview/docs/get-started
mlab - https://docs.mlab.com/
19 AI Chatbot
Description
Documentation
Description
Like the Amazon Alexa example, the idea behind this is that
you create a webhook that is used by google to fulfill a
request. When a user of a google Dialogflow chatbot asks for
flight details the webhook will be called and the code that
you write should reach out to a flight api, fetch the details and
return it.You can use one of Google Dialogflow’s flight chatbot
templates so that you don’t need to build it and can
concentrate on the webhook.
Documentation
SkyScanner API -
https://partners.skyscanner.net/affiliates/travel-apis
Dialogflow - https://dialogflow.com/
22 GraphQL
Description
Documentation
GraphQL - https://graphql.org/
Article - https://medium.com/codingthesmartway-com-
blog/creating-a-graphql-server-with-node-js-and-express-
f6dddc5320e1
23 Serverless cloud
function
Description
Serverless Architecture is becoming a very popular way to
build apps and IT systems. This is because it allows for easy
scalability, lower barrier to entry, lower cost and offloads the
need to maintain infrastructure.Cloud functions are a useful
tool in serverless architecture. They are useful, single functions,
that are executed when events are emitted from your cloud
infrastructure. Create a cloud function that returns some
mock product data.
Documentation
Google Cloud Functions -
https://cloud.google.com/functions/docs/concepts/overview
24 Build your
Own Hangouts
Description
WebRTC is becoming increasingly supported by more and
more web browsers. This makes it increasingly possible to
build Google Hangout-styled apps that will become more and
more common now that the technology is becoming much
more accessible.Try and build your own using node, I have
included an article to get you started below.
Documentation
Article - https://hackernoon.com/how-to-build-a-video-call-
voice-chat-app-in-webrtc-using-javascript-node-js-
d256d434acbc
25 PDF
Generator
Description
Documentation
pdfkit - https://pdfkit.org
26 Create an
Description
Description
Kaggle offers free to use datasets that contain large volumes
of data, referred to as Big Data. Big Data is extremely large
data sets that may be analysed computationally to reveal
patterns, trends, and associations, especially relating to
human behaviour and interactions.One good thing about
Kaggle is that the data is open for you to use. Why not take
the data and write a script that puts it into a DB, then create a
Rest API around it that lets you access it?
Documentation
Kaggle - https://www.kaggle.com/datasets
28 Create a file
Description
Documentation
uppy - https://uppy.io/
29 REST API that
requires
authentication using
passport.js
Description
Documentation
Passport.js - http://www.passportjs.org/
Article -https://medium.com/@kris101/building-rest-api-in-
nodejs-mongodb-passport-jwt-6c557332d4ca
30 Command-line
cryptocurrency
trading bot
Description
Crypto currency is currently a massive business sector. The
amounts of money being traded here are staggering. They are
also of huge interest to financial institutions who create bots,
scripts and cool new algorithms to trade on the crypto market.
Why not have ago at it yourself by creating a command line
trading bot that you could leave on a server running. There are
plenty of simulation APIs that you could use to create dummy
trades, even the simulations use real market data though so you
could test and build something that makes you money here!
Documentation
Zenbot - https://bit.ly/2nbjJlV
Article - https://bit.ly/2oQeGaU
Crypto Algorithms - https://bit.ly/2pFh9pk
31 Build a
BlockChain
Description
You have probably heard the term “blockchain” flying around in
relation to Cryptocurrency and, most probably, in relation to
bitcoin. Blockchain however has been around for a while and is
described as the following – “A blockchain is a continuously
growing list of records, called blocks, which are linked and
secured using cryptography”. It can be used for a multitude of
things, checkout the article below on 20 Real-world use cases. It
is a great technology to get you thinking creatively and solving
problems. It is also not as hard as you may think to set up your
own blockchain with node, so why not give this a go?
Documentation
Build Your First Blockchain example - https://bit.ly/2pFkyo6
What is Blockchain? - https://bit.ly/2AaV4Pg
32 Use TensorFlow.js
to perform visual
recognition on
images
Description
Documentation
TensorFlow - https://www.tensorflow.org/
33 Create an
AWS Lambda
Function
Description
Documentation
AWS Lambda - https://aws.amazon.com/lambda/
34 Unit Test cases
with Mocha.js
Description
One thing us developers often forget about, normally due to the
ecitment of trying to find a missing semi colon, is unit tests.
Testing our code is something that we should all be doing and
something I am 100% sure you will be doing at some point in
your developer life.Mocha is one of the most popular for testing
with node and having a go at writing some test cases will never
go a miss. For this, Create a basic express app with some
endpoints, or download a simple express app, and write some
test cases for the various endpoints.
Documentation
Mocha - https://mochajs.org/
35 Create an excel
processing tool
Description
Documentation
Node-csv -https://github.com/adaltas/node-csv
Moment - https://github.com/moment/moment
36 Slack message to
phone message
using Slack
and Twilio
Description
Documentation
Description
Facebook messenger chatbots are a common thing among
businesses. They use them to automate responses when
unavailable to answer or to help direct a user to the right
person.In this project you could create a chatbot with node
where it acts as a webhook for facebook messenger to call.
Documentation
Facebook Messenger API -
https://developers.facebook.com/docs/messenger-platform/
38 A real-time
multi-user sketchpad
Description
Documentation
Socket.io - http://socket.io/
Express - http://expressjs.com/
p5.js - https://p5js.org/
39 Twilio
Phone Verification
Description
Documentation
Twilio Verification -
https://www.twilio.com/docs/verify/api/v1/quickstart/nodejs#cl
one-and-setup-the-verification-application
40 Stripe
Payments
Description
Documentation
Stripe - https://stripe.com/gb
Example - https://catonmat.net/stripe-payments-with-node
41 Open
Banking APIs
Description
Documentation
Lloyds - https://developer.lloydsbank.com/
Openbankingtracker - https://www.openbankingtracker.com/
42 Integrate
Swagger UI with
Node.js
Description
Swagger UI allows anyone to visualize a RESTful API.
Visualization is automatically generated from the Swagger
specification. So Swagger UI takes an existing JSON or YAML
document and creates interactive documentation. It is an
industry standard utility that is used on the majority of
projects out there as a way to provide quick access to testing
API endpoints. Further to this it is great for devs as it creates
interactive documentation making for faster development. I’ve
included links to the Swagger website and a useful article that
will help you out.
Documentation
Swagger - https://swagger.io/tools/swagger-ui/
ReactJS Projects
React is an open source UI framework built by facebook and
is one of, if not the, most popular UI frameworks on the
market. It is commonly paired with a node server to allow for
Server-Side rendering and API proxying so I have a few
projects below that will include that. Further to this, a lot of
the projects below could be adapted to talk to some of the
projects from the node section and form complete IT
systems, keep that in mind encase you decide to
experiment further down the line.
43 Article Viewer
Description
Documentation
News API - https://newsapi.org/
React Redux - https://redux.js.org/basics/usage-with-react
44 Crypto Dashboard
crypto APIs
Description
Documentation
Chart.js - https://www.chartjs.org/
Crypto api - https://coinlayer.com/
45 Build an Admin
UI
Description
UI component libraries are used across every project that uses
a UI. Whether it means creating it yourself, or using a pre-built
library, its crucial that you understand the documentation
around how to use UI libraries.Create a simple Admin panel
using material UI that has a message section, a navbar with
hamburger menu on the left, a user image on the right and
anything else you see fit.
Documentation
Material-ui - https://material-ui.com/
46 Set up a
Description
Documentation
MERN Stack Article - https://blog.cloudboost.io/creating-your-
first-mern-stack-application-b6604d12e4d3
47 Ecommerce Store
Description
eCommerce based apps are one of the most common use
cases for React. Shopify, one of the largest eCommerce
platforms, is built using React as its front end. One project you
could work on is building an eCommerce store using Redux,
stripe and a mock product api to get your product data.For
the UI you could use the storefront UI kit that you can find in
the documentation below.
Documentation
Stripe - https://stripe.com/docs
Mockapi - https://www.mockapi.io
React Redux - https://redux.js.org/basics/usage
48 blog App Using
Google Firebase
as a backend
Description
Documentation
Google Firebase - https://firebase.google.com/
49 Create a
youtube clone
Description
You could create your own version of YouTube by using the
YouTube API or another video provider API that has some
form of search functionality. Create a search component that
allows you to type in a search term. You can then display
results on the screen.There is also a lot of room for expansion
here, you could integrate with Google sign in APIs or use
Facebook's API to add other content.
Documentation
Youtube API - https://developers.google.com/youtube/v3/docs
Vimeo - https://developer.vimeo.com/
50 movie search app
using elasticsearch
and ReactiveSearch
Description
Elasticsearch is a super fast, open-source, full-text search
engine. It allows you to store, search, and analyse large
volumes of data quickly (we are talking milliseconds here). It is
generally used as the underlying engine/technology that
powers applications that have complex search features and
requirements.With react we can use ReactiveSearch to build a
layer over the top of it to create a really fast search engine.
Why not create a movie search app that lets you search by
topic, title or actors?
Documentation
ReactiveSearch -
https://opensource.appbase.io/reactivesearch/
Elasticsearch - https://bit.ly/2VEaUNm
51 cookies pop up that
enables cookies
Description
Documentation
Modals - https://www.npmjs.com/package/react-modal
React-cookie - https://www.npmjs.com/package/react-cookie
52 Create a
weather app
Description
Create a weather app that shows the user the weather around
their area. You could go further here and possibly add places
to the map of interest near the user's location using google's
api.
Documentation
Ipapi - https://ipapi.co/developers/
and React
Description
Documentation
strapi - https://strapi.io/
54 React Dazzle
and
crystal-dashboard
to create
admin area
Description
Documentation
Crystal-dashboard - https://github.com/JSLancerTeam/crystal-
dashboard
Dazzle - https://github.com/Raathigesh/Dazzle
55 app that utilise open
Description
Documentation
Yapily - https://www.yapily.com/
56 Create your
own ebay
Description
Documentation
Ebay - https://developer.ebay.com/api-
docs/buy/browse/overview.html
57 Social media
feed tool
Description
Documentation
Facebook API - https://developers.facebook.com/
Twitter API - https://developer.twitter.com/en/docs
Instagram API - https://www.instagram.com/developer/
58 sign in page that
apis to
login / sign up
Description
Documentation
Facebook API - https://developers.facebook.com/
Twitter API - https://developer.twitter.com/en/docs
Instagram API - https://www.instagram.com/developer/
Google Identification - https://developers.google.com/identity/
59 video streaming
react app
with a chatroom
Description
Documentation
Video-React - https://github.com/video-react/video-react
Socket.io - http://socket.io
60 Create facial
recognition system
Description
Documentation
react-webcam - https://www.npmjs.com/package/react-
webcam
forum app
Description
Documentation
with GatsbyJS
Description
Documentation
Gatsbyjs - https://www.gatsbyjs.org/
63 interactive image
library with
react-spring
Description
Documentation
React-spring - https://www.react-spring.io/
64 eLearning
Platform
Description
Documentation
react-burger-menu - http://negomi.github.io/react-burger-
menu/
Evergreen - https://evergreen.segment.com/
65 Create a data
visualisation
Description
Documentation
D3js - https://d3js.org/
66 Create your
own UI library
Description
Documentation
UI design - https://collectui.com/
67 Writing test cases
jest
Description
Enzyme and jest are popular testing libraries created by
Airbnb and Facebook(enzyme - Airbnb, Jest -
FaceBook).Together they create a rich set of tools that allow
you to test your code with ease. It can be a steep learning
curve at first but once you get your head around the core
concepts it is quite easy to pick up. For this, clone a project
and create a few simple components that render some code
and then create unit tests for them. Alternatively, you can use
the repo I have left below and write test cases for the code in
it.
Documentation
Repo - https://github.com/insin/react-hn
Jest - https://jestjs.io/
Enzyme - https://airbnb.io/enzyme/docs/api/
68 Build a
Survey App
Description
Documentation
React-form - https://www.npmjs.com/package/react-form
Maps Clone
Description
There are a lot of really good Map packages out there that
provide you with a fully customisable map. You can get
location data from the device, create cool points of interest
and style the map to your liking. If you connect to the various
APIs you can create your own directions app or leave points on
the map that you could share with friends.
Documentation
React native maps - https://github.com/react-native-
community/react-native-maps
Google Maps -
https://developers.google.com/maps/documentation
70 Build a
AR App
Description
Augmented reality (AR) is a type of interactive, reality-based
display environment that takes the capabilities of computer
generated display, sound, text and effects to enhance the
user's real-world experience. The most famous example of this
is Pokemon GO.It is one of the current emerging technologies
and has a lot of investment in it. You could get ahead of the
world by creating your very own AR app using Rect-
Native.There are two packages that you can use to do this, one
for iOs and one for android. Please check the documentation
section to find out what packages they are.
Documentation
React-native-arkit(iOs Only) - https://github.com/react-native-
ar/react-native-arkit
React-native-arcore - https://bit.ly/31Hfbmm
71 Build
a VR App
Description
Virtual Reality (VR) literally makes it possible to experience
anything, anywhere, anytime. It is the most immersive type of
reality technology and can convince the human brain that it is
somewhere it is really not.You could create an App that
creates an immersive experience for your users that integrates
with other packages to create a fun app. To do this you will
need to use Facebook's react 360 library that can be found in
the description below.
Documentation
Facebook's 360 VR kit(react360) -
https://facebook.github.io/react-360/
72 Instagram
Clone
Description
If you don’t live in a bubble then I am sure that you have heard
of instagram. Instagram is an incredible app that boasts tons
of features meaning that if you were to build a clone of it, you
would pick up a ton of knowledge. I have provided an article
in the documentation that highlights how you could do this
with firebase and react-native. This is a challenging app to
create but there is so much to learn from it that I would
recommend having a go.
Documentation
Article - https://blog.expo.io/instagram-clone-using-firebase-
react-native-expo-cc32f61c7bba
73 Tinder
Clone
Description
Documentation
React-native-deck-swiper -
https://github.com/alexbrillant/react-native-deck-swiper
74 Deals
App
Description
Documentation
App
Description
Finance apps are becoming increasingly popular and are of
great value to people who use them(I use about four, so not
being biased here at all…). Create a finance app that lets the
user view the balance of their bank account/accounts. Similar
to the example I have given earlier, you could use open
banking apis to allow for access to get the info. Maybe you
could create an app that integrates with Paypal and other
online finance services to give the user some kind of
dashboard on their phone.
Documentation
Openbankingtracker - https://www.openbankingtracker.com/
PayPal API - https://developer.paypal.com/docs/api/overview/
76 Expense
Tracker
Description
Documentation
camera with React-Native - https://github.com/react-native-
community/react-native-camera
77 Ecommerce
App
Description
Documentation
Stripe - https://stripe.com/docs/api
PayPal API - https://developer.paypal.com/docs/api/overview/
UI compoenet List - https://bit.ly/2KX1Z3L
78 Article App
using Shoutem UI
Description
Shoutem UI provides a modern, clean set of UI components
that would be perfect for creating an Article based news app.
Create a simple app that lets the user Login, Sign Up, Write an
Article and read articles. You could use Google Firebase as a
backend for you. Firebase will provide you with a solution to
store users info and also hold your article data. You go a step
further and create a cloud function that gets the article data
for you.
Documentation
Shoutem UI - https://github.com/shoutem/ui
Firebase - https://firebase.google.com/
79 Recipes app
using Google
Recipe API
Description
Documentation
Shoutem UI - https://github.com/shoutem/ui
Google Recepie API -
https://developers.google.com/search/docs/data-types/recipe
80 Nutritional/Calorie
Counter App
Description
Create an app that tracks the calories for a user. You can use a
Nutritional API that returns the nutritional information for any
food.
Documentation
App
Description
Create an app lets a user record rich notes. You could take this
further by allowing a user to save it to a cloud provider like
Google Drive or dropbox.
Documentation
app
Description
Documentation
Soundcloud APIs
Description
Documentation
organisation app
Description
Documentation
addiction app
Description
Create an app that alerts users who are spending too much
time on their phone. You could take it further by sending
motivational quotes/images to them via a notification pop up.
Documentation
invitation app
Description
Create an app that allows the user to plan a party, work out
costs and send out invites to friends. You could make this app
really cool by using APIs, such as Twilio, Facebook messenger
and Google Calendar, to send out notifications of parties and
schedule them into calendars.
Documentation
Google Calander API - https://developers.google.com/calendar
Facebook Messanger API -
https://developers.facebook.com/docs/messenger-platform/
Twilio - https://www.twilio.com/docs/usage/api
87 Create an
app
Description
Documentation
Google Maps API -
https://developers.google.com/maps/documentation/
88 Stock
Market App
Description
Create a stock tracker app where a user can add various stocks
they own and track the prices for them. You can use the api
for this.
Documentation
alphadvantage - https://www.alphavantage.co/documentation/
Bonus Projects
89 Deploy a node
app to Heroku
Description
Heroku is a platform as a service (PaaS) that enables
developers to build, run, and operate applications entirely in
the cloud. Essentially it offers a simple way to publish an app
to the world and it is a platform that is used by hundreds of
businesses around the world. Deploy either an app that you
have created from this list to Heroku or use the one given
below.
Documentation
Heroku - https://www.heroku.com/
Repo - https://github.com/johnpapa/node-hello
90 Deploy a react app
to DigitalOcean
Description
Documentation
Digitalocean - https://www.digitalocean.com/
create react app - https://github.com/facebook/create-react-
app
91 Deploy a react app
to Netlify
Description
Documentation
Netlify- https://www.netlify.com/
create react app - https://github.com/facebook/create-react-
app
92 Deploy a react app
to Netlify
Description
Documentation
Netlify- https://www.netlify.com/
create react app - https://github.com/facebook/create-react-
app
93 Deploy a MERN app t
Digital Ocean
Description
Documentation
Digitalocean - https://www.digitalocean.com/
94 Create a react app
using next.js
Description
https://nextjs.org/
95 Deploy a node
app to AWS
Description
Documentation
AWS - https://aws.amazon.com/getting-started/projects/deploy-
nodejs-web-app/
96 Deploy a node app
to Google Cloud’s
App Engine
Description
Documentation
App engine - https://cloud.google.com/appengine/
Article - https://medium.com/google-cloud/deploying-a-node-
js-app-on-google-cloud-8419de45e5dc
97 Deploy a node app
to Azure
App Service
Description
Documentation
Azure - https://azure.microsoft.com/en-gb/
Article - https://docs.microsoft.com/en-us/azure/app-
service/app-service-web-get-started-nodejs
98 MERN app that has
GraphQL on the
node server
Description
GraphQL is a query language for APIs and a runtime for
fulfilling those queries with your existing data. A common use
case for GraphQL on a server side rendering application is to
reduce the need for multiple REST API calls. Create a MERN
Stack app that uses a GraphQL node server to fetch mock user
and product data with one API call from the React app. You
could use Apollo on the back end to provide the GraphQL side
of things.To create some mock APIs for your GraphQL schema
to map to, check out the mock api link provided below.
Documentation
Graphql - https://graphql.org/
Article - https://blog.logrocket.com/crud-with-node-graphql-
react/
99 Use StoryBook to
create isolated,
reusable
components
Description
Documentation
Storybook - https://storybook.js.org/
Article - https://blog.logrocket.com/crud-with-node-graphql-
react/
100 Loan
Calculator app
Description
Create an app that has a slider on it where the user can select
the amount of money they want to borrow. The slider should
start at £100 and go up to £2000. Then, once they have
selected the amount, they are asked a series of
questions.These questions should be asked in a user journey
fashion so there must be one or two questions per page. Once
the user has answered the questions they are then shown the
total cost of borrowing the money. The cost should be
calculated based on the answers they gave to the questions.
Documentation
Useful UI Library -https://demos.creative-tim.com/argon-design-
system-react/#/
101 Node
and Redis
Description
Create a node app with some endpoints that store data into
redis.
Documentation
Redis - https://redis.io/