Build a directory website

Reading time

3 min

Section

Section A : Personal Branding & Services

3 min left0%

build a directory website0%

3 min left

Tools: Softr Airtable Guide on how to build an online directory using Airtable and Softr This exercise is sure to level up the excitement for everyone as you will be developing a movie director website (not exactly Netflix but just as cool!). For the data of movies and TV series, we will create a directory on Airtable! and for the front-end, we will use another awesome no-code tool that is super simple and fun to use: Softr. You will be able to turn your favourite movie list data into a professional website using AirTable as a database and Softr as a no-code frontend tool to create elegant web apps simply and rapidly

What you’ll learn? - Linking Softr with Airtable - Using API - Using Softr efficiently and handling its various components

Steps - Step 1: Choose a suitable name for your website and create your own logo (You can have a look at logo files in the Article section to help you choose a simple and handy name and logo). - Step 2: Create a new database on Airtable. We suggest creating the following fields (columns): movie name, movie poster, short description, genre, and film rating. - Step 3: Go to Softr and create a new account (if you don’t have one). - Step 4: Select ‘’New application’’ - Step 5: Use the different blocks provided by Softr as needed to add a header to place the logo, a footer, and maybe a hero section. - Step 6: To display the data from AirTable in the Softr web app you have to add a dynamic List as a new block in Softr. - Step 7: Now you need to link the Airtable to Softr(Settings > Integrations > Airtable). You can get the API code from your personal profile on Airtable. (You can also learn more about the API by looking at the Related Articles section). - Step 8: Click on the List item and fill in the properties: Airtable Base, Table, View, and Filters. It would be nice to filter by Genre for example. - Step 9: After completing the linking process, now you have to tell Softr what data you want to read and which field will be read from the list properties. - Step 10: Perform some final touches by reviewing the design, colours, fonts, styling, and maybe trying out some other cool blocks. - Extra step: to display the details of the selected movie card on a new page, you can create a new page and select the List Details block from the Dynamic blocks, then connect it to Airtable same as the previous steps. Then you can go to the home page and click on the movies list, and in the On, Click select the “Open page” action and link it to the details page that you have just created. Congratulations, you now have your own website to share your favourite TV series and movies. Now it is your call to unleash your imagination and add some more features to engage your visitors and grow your audience. It goes without saying that you can follow the same way for similar ideas for apps or web apps that start with a data listing and need a quick front-end tool to turn it into a contemporary design. Share with us your ideas and products of your work. We are so excited to see your progress.

What you’ll learn? - Linking Softr with Airtable - Using API - Using Softr efficiently and handling its various components

Steps - Step 1: Choose a suitable name for your website and create your own logo (You can have a look at logo files in the Article section to help you choose a simple and handy name and logo). - Step 2: Create a new database on Airtable. We suggest creating the following fields (columns): movie name, movie poster, short description, genre, and film rating. - Step 3: Go to Softr and create a new account (if you don’t have one). - Step 4: Select ‘’New application’’ - Step 5: Use the different blocks provided by Softr as needed to add a header to place the logo, a footer, and maybe a hero section. - Step 6: To display the data from AirTable in the Softr web app you have to add a dynamic List as a new block in Softr. - Step 7: Now you need to link the Airtable to Softr(Settings > Integrations > Airtable). You can get the API code from your personal profile on Airtable. (You can also learn more about the API by looking at the Related Articles section). - Step 8: Click on the List item and fill in the properties: Airtable Base, Table, View, and Filters. It would be nice to filter by Genre for example. - Step 9: After completing the linking process, now you have to tell Softr what data you want to read and which field will be read from the list properties. - Step 10: Perform some final touches by reviewing the design, colours, fonts, styling, and maybe trying out some other cool blocks. - Extra step: to display the details of the selected movie card on a new page, you can create a new page and select the List Details block from the Dynamic blocks, then connect it to Airtable same as the previous steps. Then you can go to the home page and click on the movies list, and in the On, Click select the “Open page” action and link it to the details page that you have just created. Congratulations, you now have your own website to share your favourite TV series and movies. Now it is your call to unleash your imagination and add some more features to engage your visitors and grow your audience. It goes without saying that you can follow the same way for similar ideas for apps or web apps that start with a data listing and need a quick front-end tool to turn it into a contemporary design. Share with us your ideas and products of your work. We are so excited to see your progress.