Transcription
Hey everyone, welcome to today's video. My name is Lucas and today what we're going to be doing is we're going to be combining Framer, Notion, and Lovable.
Right, we're going to be using Framer as a front-end job board where users can basically see the different job positions that are being shown, what their comp, what the company name is. You can they can read more about the position, about the salary and and whatnot.
And Notion is basically going to be the back end of this job board where users can basically add new types of jobs. They can edit the different jobs. They can edit the, for example, the the the role. Um, they can edit the name of the company. They can insert an image that represents this company.
And Lovable is basically we're going to use Lovable to create kind of like an app where it's going to be like an applicant tracker where users can basically read more about the specific applicants and they can eventually reply to the applicants there inside of Lovable. So, it's basically going to be like a little job board ecosystem. So, if this sounds interesting for you guys, let's go ahead and get started.
So, the first thing that we have to do is look for a Framer template that kind of matches our needs. So, we need something that looks like a job board and that it's also kind of attached to the Framer CMS, the content management system, which is basically a very powerful tool inside of Framer that basically it's kind of like a an Excel sheet inside of Framer where you can add different information and it's portrayed in the front end in Framer. In this case, we're going to be using a Notion database to sync with the Framer CMS. And basically using Notion the information is going to be shown in Framer and we can sync like that. And then once we have that done we're going to build our Lovable app. We're going to create a nice prompt for Lovable and eventually we're going to link we're going to sync Lovable with Notion and kind of test the whole process to see how it works.
So I'm going to head to the Framer template marketplace and what we can do is we can search for a specific keyword. We can search for job portal and click on enter. And we get a few different types of job portals. These are a little bit expensive. I want to look for like a free variant. Let's just look for job. So, we get this one that's 50 bucks. And we get this one that's for free, right? There's a few ones that we can use, but this one looks pretty good. I guess this one looks really nice, but it's kind of out of our price range for today. Um, so this is what's awesome about Framer is that you can look at the marketplace and find a bunch of free and paid templates that kind of fit your needs. In this case, this one called Shifter looks pretty good. Again, we can click on use for free. But before we do that, let's go ahead and preview what it has. So, it's it's CMS support, which is great. Four complete pages, which is fine. And as I can see, we have like this main page where we have the job posts. And then you can click on this job post and read a little bit more about it, which is exactly what we need. And we can just go ahead and click on preview and see. Okay, these are like all the different job posts. See all job posts. And then we can just click on one. And then basically we have this and we can apply for this job. And basically we have this form. So actually I think the form is not really specific to the job. I think it's like a general post a job contact form. So, it would be actually very nice if we can have a form here specific to this role. But that's some that's something to think about later. Let's just go ahead and use this for free. Click here. And then once we duplicate that, we can just rename this. We can call this, for example, job job portal tutorial.
And when we go into the layers, we can see that when we select one of these, you see that there's already like a CMS attached to this, right? So, let's go ahead and and see what it's called. It's called jobs. So, if we go to CMS, we see that we have one CMS collection and it is basically native in Framer. So, it's not coming from Google Sheets or from Notion. It's it was made right here in Framer. But if I were to click add, you can go here on import and we can eventually click on this Notion thing which is exactly what we want. Um, but before we do that, we need to create a Notion database so that we can properly sync it here.
So here on the right I have a Notion database and what I want to do is I want to just click on one here in Framer so that we have like the same basically like the same columns over here. Right? Each one of these titles is a column here in Notion. So, I want to have the same things. Uh, we're not going to use a slug because a slug is produced inside of Framer, but we're going to have the title, category, tag, date, job title, job type, job location. So, we're going to basically add all of this here. And the way to do that is we just go back up here and click plus. And we can go ahead and add something like a text. And this text would be called category. Right. And basically we have that over here. And we can do the same thing over here. So text and we can call this one tag and so on and so forth. All right. So I've basically added all of the different titles here. And we have it's going to be tricky with the logo. I added this file category. I don't know if it's going to be the correct one or if we should use URL for the images. We're going to see how that works. But we basically added everything. And the reason why I wanted to make it exactly like this is because it'll be easier for us to basically relink everything in the front end. Um, if we just have a very similar structure, data structure, right? So, let's go ahead and add a new page. So, I'm going to go and just add different titles for the jobs and different categories and whatnot. All right. So I have one, two, three, four, five different opportunities. And the reason why they're so kind of tall is because of this. We have this content which we basically explain the different responsibilities, uh, benefits and whatnot. So, yeah, we have this here in in Notion. And now what we want to do is we want to basically import this into Framer. So what we can do here is we can go here on these three dots and go to connections and click Framer. Click on confirm and we have we see here again under connections that we have this Framer connection active. So now what I'm going to do is I'm going to go back to Framer click here on add import Notion and we're going to call this job rolls create. And yeah, we finally get we get this basically synced automatically. Click on next. And then this is kind of the important part, right? It's reading our different fields that we basically added these different columns. We have the slug field. So remember remember like I said before, Framer is going to generate the slug for us based on one field. We want it to be based on the title field, right? So we have the slug that's going to be based on the title. So this one is going to be for example superbase engineer. So um okay the content which is at the back it's going to be formatted text date is going to be date. Job location let's just make it a string. All right let's try with a string. Job type it's this one. It's going to be a string as well. Tag is this one. It's going to be a string. So formatted text is basically like if you want to have a larger piece of text and you want some phrases to be bold, some phrases to be like a heading, some a paragraph. But in this case, we have very short, you know, strings of text. So we're just going to leave it as a string. Category string. This one is company. I don't even know what this is. Can we company logo? Okay, company logo is going to be a file. We can make it an image. We have content twice. So that's kind of weird that we have it twice. Let's just make this a formatted text as well. So string string image company name is going to be string company website link perfect company location string salary range string and title string okay import from jobs boom it is basically imported and we get the logo as well so that's pretty good so I want to see we have the title this is the slug and we have the title somewhere okay here's the title here's the salary range location website perfect company name, logo, category, tag, part-time, content, and this is the other content, which is weird, right? Um, there should be something here that is empty, maybe. Maybe it's this thing that's empty. Uh, but yeah, at least we have like the main stuff, right?
So I'm going to make Framer full screen again and we're going to go back to this basically this main section and we're going to insert a collection. This collection is going to be job roll. So basically what we have here but for the from the other collection and we're going to use this same widget for this. And we're just going to delete this. And we're going to make sure that that it's matched. So, let's just duplicate this. Bring this in here and delete these guys. And I guess what we're going to do here is we're going to make this set to fill. Let's just make sure what this is. This is set to fill. This is set to fill. And this is set to fill. So, let's just make sure that everything here is set to fill. So, fill. This would also be set to fill. Boom. And this is set to fill. Perfect. So we already have this connected. Now what we've got got to do is we just got to make sure that these different variables are connected just like here. So we can delete this jobs one and we can go here and collect connect everything. You see how it's missing blue blue. Let's just go like this. Set variable to company logo. Perfect. They're it's all the same logo because it's from the same company. Uh job location. Let's go. Set variable to job location. Job type. Set variable to job type. You can see that things are starting to change. Date. Set variable to date. Format date. Right. Perfect. And we have still company name. Let's set the variable to company name. and job title is going to be the title. Perfect. So now we got our, you know, our stuff here. Looks great. And we want to just replace it with this as well. So let's go ahead and duplicate this collection. Bring it down here and delete this jobs one. And what we can do with this here is we can filter this filter by um the I think it was the category or the featured the tag right the tag equals featured right so if it equals featured then they can be shown here. So these are the featured ones right and these are all of them or basically the the most recent ones. So if we want to if we want to sort this as well by the date, we can do it from old to new or we can do it from new to old, which looks great. And yeah, that that looks awesome. Uh I do see this featured company. Let's just delete this because we're just doing this for one company, right? This is our fake company logo that I just made with JPT. And yeah, so this page is looking great. We do have other pages as well like this browse page which is basically browse all jobs. Once you click on this it takes you to that page right. So let's go ahead and copy this and just replace it in that browse page over here. Go like this. Replace it. And let's take away the sorting. So we have all of them. All right. And we also have these engineering, marketing, and designer jobs. I guess we have engineering design and we have like two others. Let me see. Um, if we go to job roles, we have operations, design and engineering. So, instead of marketing, it's going to be operation operations jobs. And here, what we're going to do is we're just going to go ahead and copy this. Let's actually go to the browse or let's go to this one. Pick this with this filter. And we're just going to replace the filter. So pa p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p page engineering. Let's go to the layers. Paste this in here. Move this up here. Delete this one. And we're going to replace the filter to uh not tag but job type. I think it was was it job type? No, category. So we got to replace this category equals engineering. All right. So we have one engineering job. Let's go ahead and copy this and bring this to this other page. So just go to layers, open this layers panel. Replace this here. Delete this. And we can go ahead and instead of engineering, we can go and put operations. There should be two. We get two. Awesome. And let's just change this to operations. All operations jobs. And we can go ahead go to this design one. I guess there's also two. And paste this. Go like this. Delete this. And we just replace this tag with design, right? And we get two. All right. And that's basically it. We just have to kind of refine everything so that it matches what we want. Let's just delete these, you know, um, template things over here. It's looking great on the mobile as well. So, that's perfect. That's why I love to work with templates because, um, the designers that make them are just fantastic designers. Shout out to them by the way.
But yeah, now what now what we need to do is that, you know, every time a user clicks on one of these, they need to read the information about this specific job. So we do have this but we have it from the old from the old uh how do you call it collection. We can just swap the collection to job rolls swap and we have it like that. So basically, we just need to replace everything. So I guess here we're missing something. We're missing content. We don't want to replace it with the first one. We want to replace it with the second one. So let's go ahead and set the variable to content. I think this one. Yeah, perfect. So as you can see, it's looking great. And we have the company card. We can view the website. And then we can hit on apply for this job. I don't know if we want to do it like that or if we can just add some type of form at the bottom of this page. I think that that would be a better idea, right? But before we do that, let's just fix this over here. So, we need to add some type of filter. Title doesn't equal title and category doesn't equal that. So, I wonder if we can swap the collection here. That would be an easy thing to do. I don't think so. replace with no. So, let's go ahead and just copy that from that from the homepage. Just copy this. Go to layers. Make sure that you're copying the correct thing. And we we go to the job rolls. This we can delete. And we have our job rolls. Perfect. And here we just want to replace this over here. And we just want to add these same filters, right? So we have filter one, title doesn't equal title. So get this filter one. Filter title doesn't equal the title of this page. So accountant won't be here. And what's the second filter that they added? Let me see. We have category equals category. Okay. Okay. Similar jobs. Got it. So, filter select category equals the same category as this one. So, accountant and community manager. Perfect. So, let's just delete this one. And now we can go ahead and focus on the on the form that we want to add here.
Now what we can do is we can add a simple contact form by going up here and click uh typing in form and just placing in this contact form somewhere down here. Right? We could do that and it does give us some good, you know, things to play around with. But it's quite simple. um you can't, you know, ask a user to upload a file for example. Um, let's say that you you really want to do this for your company and you want the applicant to upload their resume. Right? You can't really do this with the standard Framer form. So in this case what I'm going to do is I'm going to use something called Framer Forms. Right? It's a plugin. You go over here, you type in Framer Forms, click enter and it's going to prompt you to log in and you basically do that. And once you're logged in, you have different types of form inputs. We have like the file upload, uh, the text checkbox, drop down, email, text area, slider, number, phone number, radio, image, select. I mean, there's a bunch of different things that you can choose from. Um, this is a paid plugin, but you can get 10% off with my code L U K and all in uppercase. So, just, you know, keep that in mind if you want to do that. I also have the link to this link to that checkout in the description below. But before we add in a form, I'm going to go ahead and kind of choose. So, we have we want to add the form here. So, I'm going to go ahead and put a new form. I'm going to go multi-step form and click on that. And it basically adds it here. And what we're going to do is we're going to add this multi-step form inside of this layer. So, we're going to go like this. Make sure that it's in the correct one. It is. Let's set this to fill. And what I want to do is I want to set a specific form for each category. In this case, we have three categories, right? We have the designer jobs, we have operations, and we have engineering. So each form is going to be a specific form for one of these categories. So um with that being said, uh we're going to have to create three different forms and add some type of filter set on the visibility. So whenever this accountant job posts is there, we have the accountant form. But before we do all of that complicated stuff, I'm going to just go ahead and try to, you know, add some cool stuff here. So, we have page one, name, email. That's fine for now. We can do page two would be can add a file upload. And let's just make sure that our layers is are open. So, we can see if everything is correct. So, we have this. We have our file upload which is basically, you know, you can drag in a a resume. Uh, we can add a link for example for a website right like this. We can put these together by adding a stack like so and making the stack basically um horizontally aligned. And we can make sure that this is like set to fill as well. So they're both the same size. We can do the same thing over here with these two. So set put these two together. Add stack. Put this like this. And make sure each of these are set to fill, which they are. Perfect. And we can do like two file uploads. One for a CV, one for, I don't know, like an image. Um, right. So, and then we can just rename this like upload your resume and we can put like cover letter, right? So, cover letter URL. We can put like a portfolio URL or LinkedIn URL would be actually more realistic. Portfolio is more for designers and for something like that. And then for engineers we can put like GitHub and your location. And then with with number three we can add like a long text, you know, saying that uh by submitting this you agree to this this and this. So, yeah, we have here it can be like general contact information. Um, here we can have like professional information. And here we can have submit, right? And let's just add a nice little design to this. So we have our different pages. And over here, let's just make sure that this is somehow has a border. The border is kind of, you know, a little bit low opacity. Has a nice rounded radius. Uh, we can add some gap here so it's not so close to the text. Maybe like 50 pixels apart. All right. And then if I were to press play here and scroll down, we can see that we have this with this nice border color. And we can click on next. And we can, for example, click here and it uploads your resume. Click on next. We need to add some type of location. and agree submit. Right? So that would be for the accountant and we can put uh go here contact information and then we can we could add some type of title to this. So what we can do is we can duplicate this and add a title to this specific form. So operations position application right so that we can know which one is which. This we can make it the primary color and we can make it like like an H5 something like that. And we can make these also a primary color. So now it's starting to look a little bit more a little bit better somehow. Okay, we did get some type of bug. This shouldn't be a page. It should be over here, I would say. So let's go back. And now it's now it's working. Great. All right. So now we have to duplicate this twice because uh for some cases I mean for the accountant one and for the content creator one I guess it's more operations or community manager one it's more operations but lovable UI designer and content creator are going to be more for design and the superbase engineer is going to be more for uh engineering. All right so we're going to go ahead and duplicate this. We're going to call this one operations form and duplicate this twice. This one's going to be the design form and this one's going to be engineer form. So, and then in the design one, we can go ahead here and go designer position application. Here we can put upload your portfolio. Um, and you can also, you know, basically edit whatever you want here. We can make an engineering position application. Great. And now what we have to do is we got to set these different visibility filters. Sorry. We have to set these different visibility uh filters. So, all right. So the best way to do it is if we set the visibility to category if the cate category contains operations then it's visible. This this one the design form is gone as you can see because I put the condition to category equals design and we basically just have to do the same with the engineering one. So uh let's look for visible set variable to category. Where is it? Category um equals engineering and let's click on enter. Here we go. So we only have one here. If we go to content creator, we only have one. Community manager only have one. Lovable UI only have one. It's designer. And over here we have the same only one. So, and we don't have any similar jobs because there are no other engineering jobs, but the form is working, which is which is fantastic. All right.
So, we've done step one, step two, step three. Now, what we have to do is step four, which is basically to create a Lovable app and then sync this uh Notion information to Lovable. I'm not sure if we want to sync the Lovable Notion information to Lovable. I think sync Lovable with Framer Framer submissions. I think that would be the the most logical thing to do here, right? Because the we don't need Notion anymore. Notion is just going to go directly sync to Framer and then the Framer stuff is going to go into Lovable. So let's go ahead and go back to Framer. And each one of these forms has a different form send to location. So we're going to basically send this information. We could send it via email, web hook or Google Sheets. And what we're going to do is we're going to send these to different Google Sheets. So for this one, operations, I'm going to connect my Google account. All right. So once we sync in our Google Sheets, we can create a new form. So we can go here to and call this one operations. Click on create and it's connected. Let's do the same thing over here to design. Send to Google Sheets. Add. Let's call it design create. And this one should be send to Google Sheets. We're going to call this engineering. And now if I were to go to Google and to my Google Sheets, those forms are those sheets are going to be there automatically. So we have engineering, design, and operations, which is great. So, what we're going to be doing is just opening each one in a new tab. And while I'm at it, I'm going to go ahead and make all of these anyone with the link. Done. Because what I'm going to do now is I'm going to basically just share this URL with Lovable so that Lovable kind of understands um the form submissions and and can basically sync them inside of this app that we're trying to build. And what are we trying to build? We're trying to build an applicant tracker. So I'm going to go ahead and look for Lovable.
So once we're inside of Lovable, we can start prompting what we want to build. So, we want to build an applicant tracker. Um, let's just build some nice solid prompt that is kind of also design oriented. We want this, we want the design to also kind of fit the design in Framer. So, if we go to Framer, we see it's very black and white oriented. We have this font which is I don't even know inter. Okay, we have this inter font. We have this black color, black, white, and very minimal gray, right? So, we want to kind of keep that here as well. Also, let's just delete this because we don't really need this anymore. Or we can keep it, but the link would basically take us to this to this section down here. And what we can do is we can set these into a to a stack. And we can give this some type of scroll section. We could call it apply. And we basically the link can be so we're going to go links to slug. Okay. What we're going to do is we're going to remove this and we're going to set create a variable for this. We're going to call this link apply. And link apply is going to basically take us to job slug job ro section apply. So if I click on play apply for this job should take me down there. It doesn't. Okay. Now it does which is great. All right. And so yeah, that's great. We have that. Okay, what were we trying to do? We were trying to go to Lovable and basically create that. So what I want to do is ask Lovable to create this applicant tracker app. So I have this design a mobile first applicant trap tracker app for my business that collects job application information. See attachment. The attachment is basically going to be um it's going to be a screenshot of one of the forms. So, I'm going to go ahead and just submit some random information. And let's click on submit. And we should get something. It doesn't give us any reaction. So, we have to fix that. But we applied to a operations job. So, we get this over here. We get date. We get the email file. We get one file because I guess there's they're named the same. So, that's something that we do have to kind of correct. So um this should be called resume. This should be called for example what was it? Cover cover letter. So now if I try again I'm just going to put some random information. Click on submit. And then let's go over here to design. And now in design we have resume, cover letter, URL. Perfect. We can call this one LinkedIn. um or portfolio, whatever. But it's important to kind of name these different input fields before you start uh, you know, creating submissions, right? If you're doing this Google Sheets integration. So now that we have that um I'm going to basically just copy this or take a screenshot of this and put this inside of the Lovable prompt so that it kind of understands the job application information that it's receiving. Um, so yeah, let's go ahead and submit that. I'm also going to include the applicant information is coming from three different public Google sheets Google sheet URLs. Let's just write URLs design engineering and operations. Please integrate my public URL to this app. Public URLs let's write plural to this app so we have real applicant information. All right. So, let's just submit this and see what it does.
All right. So, Lovable basically created this nice UI for us where we have our applicants like this. We can switch between the different categories. Um, they did sync in one of mine uh because of the screenshot. I believe we can view the details. We can see the different things that they've added. So, let's go ahead and sync this with our Google Sheets. I'm just curious to see how we can do that. So it says what's next? Refine and customize. Master prompting GitHub sync. Debug with ease. Add project knowledge. So I'm going to go and say I've created an elegant that integrates with Google Sheets data sources. Is there a way that we can integrate here? No. So I'm going to say let's integrate with Google Sheets. So I said let's integrate this app with Google Sheets. Please add a link input on each category for each category link. All right. So now what we have up here is we have the settings thing. So what we can do is we just how to get your Google sheet ID. The ID is found in the URL of your Google sheet. For example, in the URL blah blah blah the ID is the highlighted part. So we need this. So what we're going to do is we're going to go ahead and just get the link. Copy link. So we can actually just get it from here. Save settings. And now it should work. So we have these updated. Let's just go ahead and sync this. So even with the publish version, it's not really working. So let's go ahead and say so I said I have published the app, but when pasting the Google URL ID, the settings don't get properly saved and the form submissions do not show. All right. So now we have this new version where we have the these different types of errors. Important make your Google Sheets public, which we did. So, we know how to do these two. And it says error fail to load applicants because it's using this basically these mock IDs. So, let's go ahead and just replace everything with what we have. So, design, copy, go over here, select everything, paste operations. Let's delete this. Copy this. Paste. Save settings. So let's go back to the homepage and failed to load applicants using mock data instead. So it's still kind of refresh. It's still not working properly. I fixed the Google Sheets integration by providing a valid API key. So let's I don't want a Google API key. That's probably the thing that's not working. So let's just fix that. All right. And now it seems to work. So basically what I did here was um I asked it to remove the Google API key requirement which was what was causing the problem I believe and just to use it based on the URL ID. So basically this ID right here. So we have engineering is is empty right now. Design has this one person and operations also has this one person right Lucas. And what we have now is that we have this um for this person inside of operations. It's not perfect. We do see the resume which is a should be an image of mine. Um but yeah um it's starting to work which is the good part. Okay. So now it's saying that uh the required columns have to be dates, location, newsletter name. I don't know why it says newsletter. uh email, resume, cover letter, URL. The first row should be headers. Okay. Okay. And the column should be in this order. We can go ahead and try to just integrate the design one since we have one submission. And that's what you know we need to have it in this order that it's calling that it's it's uh specifying right here. But let's just add this operations one which is already synced. That's great. Okay. And it is syncing. So design applicants Lucas. So that's great. We have operations and then we have engineering. We have none. So it's giving us this you know fake data. But what what we can do is we can go back into Framer and just submit some type of engineering roles. You can see that engineering has been synced. So let's just make sure that this is properly set up in the settings. And then we do get something in engineering but as you can see the details aren't properly synced. So that's just important that you guys you know go ahead and make sure that the format of the rows type of uh format in terms of yeah looks right. So we get this looks pretty good and again this contact one opens the email and as you can see it opens to this specific email which is pretty cool right it's it's not working perfectly but it's going in a good it's going in a good pattern uh in a good path.
All right so that's basically it. We have our job page with the different um you know types of jobs we can apply to. We can basically click on one of these and it takes us to one of these job roles. Let's say this one's superbase engineer and we can scroll down and see this right. We can start the form. Each form is basically specific to their category and they basically take us to a different type of Google sheet which is then linked to our Lovable app where we can basically have this type of applicant tracker database where we can see the different people that are applying and have the ability to view the resume, view their co cover letter, view their portfolio if they're a designer or their LinkedIn profile if they're, you know, in in the operations field and we can go ahead and contact them, right? So, yeah. Um, eventually you can do much more with this. You can set up different uh ways to contact them. Um, basically set up different set up different uh templates, email templates to contact them. If they're a designer, you have one type of template. If they're an engineer, another type of template. So, you know, the the imagination here is pretty big. You can do whatever you want, but basically this is just like the the um basics of going from Framer Notion to Framer CMS to Framer front end to Framer form to Lovable and basically Lovable. There you have this first step where you can basically do as many things as you can because Lovable is a very powerful tool.
So I hope you guys enjoyed this tutorial today. It was a lot of fun preparing it and and actually doing it. So yeah, hope you guys enjoyed it. Thank you so much for watching. If you like this type of content, please don't forget to like and sub subscribe. Um, I really appreciate that. And um, yeah, let me know in the comments if you want to see some other type of build. I'll be more than happy to to read those comments and see which one would be interesting for next time. So yeah, hope you guys have a wonderful day. Thank you so much. Bye-bye.