DEV Community: Roy Weru

Memorizing on my first days learning how to code..

Roy Weru — Fri, 11 Oct 2024 19:54:13 +0000

Today, I found myself pondering what it truly means to be a beginner in the world of coding. A newbie might wonder: Is coding really that difficult? Is programming—essentially giving instructions to a computer—some kind of magic?

I'm going to answer these questions to the best of my ability, drawing from personal experience, which I believe will give the most honest perspective. I remember the first piece of code I ever wrote in HTML—it was three years ago. It was a simple H1 tag that said, 'Hello, world!' (Of course, right? 😂). I was so excited to work on a YouTube clone, thanks to a tutorial. I felt like a genius! The best part was launching the website live using the 'Live Server' extension—my very first VS Code extension. Every time I hit Ctrl + S, the page would refresh instantly. Man, that feeling was exhilarating! From designing buttons, padding divs, to styling paragraphs, it all felt like magic. I used to wonder how web and mobile applications worked—it seemed so mysterious. Honestly, creating my first website felt like an achievement reserved for geniuses, something I never thought a regular person like me could do 😂😂👨🏾‍💻.

As I ventured deeper into the world of programming, writing, and deploying code, I began to realize something:_ coding isn't reserved for 'very smart people' or geniuses._ Instead, the coding world is built for those who are tough, resilient, and mentally strong—not for the faint-hearted. When I created my first application, I was nearly convinced that I’d land my first job or get paid for a project within days. But after a year or so, reality hit hard🥲🥲. I learned that to be good at coding, you first have to struggle and, quite frankly, suck at it🤨 .
Yep, 'to be good at it, you have to suck at it'—that's the phrase I'd tell any beginner seeking guidance in this field. The best programmers are the ones who have faced the most bugs and errors. You will be surprised to find out that even the most experienced ones still have some learning to do and they google for solutions .To achieve and truly learn, you have to make mistakes—there’s no way around it. You'll encounter bugs that might take days, even weeks, to solve. When you finally crack the code, it feels like a major victory, but that joy is short lived. Before long, you’re staring down another bug or challenge, forcing you back to the drawing board to rethink your approach.

The journey to becoming a great programmer mirrors life itself—it's full of challenges. Ever wonder why so many developers give up so quickly? It’s because the lack of motivation and the weight of constant setbacks can be overwhelming. The truth is, you’re not going to land your dream job overnight. You won’t become a 100x developer in a snap. It takes time, experience, and a level of commitment that many beginners struggle to embrace.
Watching a single tutorial on HTML, CSS, or React won’t land you a job. As a web developer, one thing that helped me grow was paying close attention to the websites I visit every day. Take LinkedIn, for example—try to figure out how they enable users to upload videos, files, and pictures. What backend technologies might they use? How can I implement similar features in my application? Should I use Amazon's S3 or another service for file uploads? When you visit your favorite online store, ask yourself: How do their filters work? How am I able to search for a specific product? What technologies do they use to fetch products and sort them into categories? These questions are crucial for understanding real-world web development and pushing yourself beyond the basics.

Working on projects that solve real-world problems is the true start of your journey to success as a developer. It’s not just about a sleek interface or beautiful design—it’s about what the system actually does. When you shift your focus to creating solutions that have real-world applications, you’ll naturally start to level up your skills. You’ll learn more, expand your thinking, and ultimately stand out. As I mentioned before, bugs and errors are inevitable, so don’t give up when you hit those roadblocks. I’ve had countless sleepless nights designing databases, wrestling with what to include, what to leave out, and what’s truly necessary. Wrapping my head around these decisions often leaves me with headaches! But whenever I’m on the verge of quitting, I remind myself: nothing worthwhile comes easy, and neither should this. So, keep pushing forward.

Demystifying Django, how I built this simple blog application with the Django framework...🙌🙌💯💯

Roy Weru — Thu, 15 Feb 2024 05:22:22 +0000

Hey there fellow developers and tech enthusiasts, have you ever heard about the Django framework. Lets work together to create this simple blog application with a step by step guide..

You have to be familiar with the Django framework and have some experience with it. We start off by initializing the virtual env, I use the pipenv and I will be using visual studio code as my editor for this tutorial.

If you don't have pipenv installed start by running the following command

pip install pipenv

once pipenv is installed choose a directory for your project you can use the mkdir command to create a new directory or navigate to a new directory using the cd e.g

cd desktop
mkdir Django-blog

After choosing the directory run the command
pipenv install django

Wait for Django to be installed and all the requirements, after this is done run the command

pip freeze > requirements.txt

This will generate a requirements.txt folder which will be very useful later on.

Make sure you have navigated to your new directory in which you are going to work in. If you were working on your terminal and want a shortcut make sure you are in the directory you want to open and if not you can access using the cd command and once you in the directory you want to open run the command code .

They are other options to create a virtual environment but I prefer to use the pipenv as it is much simpler and more modern.

LETS NOW BEGIN WORKING ON THE PROJECT

If you followed my guide on using the pipenv you should be seeing something like this:

If you have those two important files you are completely on the right path and you can initialize your project

django-admin startproject your-project-name .

The full stop at the end will avoid creating two directories with the same name which mostly leads to confusion. You can run
py manage.py runserver

on your terminal to test and see if everything is ok and your website is running live.

We will need to have another whole "app" in our project which will act as new directory similar to the one created on initializing the project. This will be great to work with as Django give one the opportunity and flexibility to divide a big project into many other independent small sections which one can handle and be able to manage even very huge projects. Run the following command on your terminal.

python manage.py startapp your-app-name

Make sure you assign a different name, personally this is how my directories look like:

This will now come in hand when it comes to managing our modules and more. Navigate to your setings.py in the root directory and head over to the INSTALLED_APPS and add your new app.

Head over to the urls.py to configure your urls to include the urls that you will have on your new app directory:

Now make sure you have models.py, urls.py and views.py on your admin directory.This is how the urls.py in the new app directory will be looking like:

Let's create the models.py :

We create a class called Post and Topic and we define our models as I have done. I have also added authentication to my blog website and a video of how it operates Link to video. I cannot be able to complete the whole tutorial with this one blog so I have a part two blog which will elaborate more and finish on the tutorial

What does it mean to be a developer?

Roy Weru — Sun, 11 Feb 2024 17:25:29 +0000

Today I asked myself the question, what does it really means to be a web developer/software developer/programmer? A new bee might also ask is it really hard to code or program or give instructions to a computer, is it some kind of magic?

I’m going to answer this questions to the best of my ability and from my own personal experience, this I think will be the most honest answer and view. I reminisce on the first code that I wrote in HTML ( that was 3 years ago). It was a H1 tag with the statement "hello world!" 😂😂 obviously. I was very excited on working on a YouTube clone with the help of a tutorial of course. I felt as if I was this kind of genius and the most awesome part was being able to launch the website live using the ‘live server extension’ that was the first vs code extension I downloaded. Whenever I pressed on the Ctrl key + S on my keyboard it automatically reloaded and refreshed the page. Men! I tell you it was so exciting and satisfying, from designing the buttons and padding the divs to styling the paragraphs, it was something that always seemed like magic to me. I used to think and wonder how web applications, mobile applications work and think it is magic. Creating my first website to be honest was almost something I never thought a normal human being but only geniuses were able to achieve.

_As I began to venture more into the world of programming , writing ,deploying code _I began to realize some things about the field and that actually coding was not really meant for ‘very smart people’ or geniuses. The software development field was actually meant for the tough, mentally strong and not the ‘soft hearted or the give up easily type’. On creating my first application I was almost close to certain that I would land a first job or get my first paycheck on a project within a few days .It took me an year or so to be hit by the harsh reality that to be good at it you have to suck at it.

Yep,” to be good at it you have to suck at it “ , that’s the phrase I would tell any beginner in the field who would seek for some kind of guidance .** The best programmers are those that have dealt with the most programming bugs and errors**.

In order to achieve and learn something you have to make mistakes and I use the phrase “have to”. Bugs and errors that last for days and might even make you quit are the real teachers. The journey of becoming a great programmer is actually like life itself which comes with a lot of ups and downs. Watching one tutorial about the basics of HTML CSS or React is not going to make be that programmer that you desire to be. You really have to ask yourself a question what kind of applications do I interact with everyday? If I’m able to upload a profile picture or a video or a file and submit how did the developers achieve that? How I’m I able to subscribe to Netflix ,medium what kind of code or technology do they use? How can I create an application in the real world that users will be able to accomplish various tasks, uploads images receive feedback emails ?

Working on projects that can actually solve problems in the real world as a developer is the beginning of your path to success. It’s not just about the simple interface or the beautiful design it’s actually what the system can do. With this view you will start focusing more on projects that actually make a difference and you will not just be any other developer but one who can actually make an impact. It will make you learn a lot more and expand your horizons of reasoning and you will surely stand out. As I mentioned on bugs and errors this are part of the process to getting somewhere. I almost get sleepless nights trying to design my database and thinking of what to include what to leave out, what would be appropriate and what will not be of need e.t.c…trying to wrap my head around this things can at times leave you with headaches. Whenever I’m about to quit I remind myself its not really easy and nothing great should

The job market for software developers in 2024

Roy Weru — Sat, 03 Feb 2024 19:40:54 +0000

In the sunny dystopian year of 2024, the job market for software developers is abuzz – kind of like how your phone buzzes when you get a text. Only, this time, it's buzzing with opportunity. Now, developers are no longer just locked within the confines of writing code for mobile apps or designing websites; they are the smack-dab in the middle of some cool, almost science-fiction-like, evolution in technology.

Remember that scene from Transcendence when Johnny Depp becomes an AI? Well, we are not there yet, but developers are making some serious headway in the realm of AI and machine learning. As businesses are going digital at a pace faster than Usain Bolt can run, no one can quench their thirst for data analytics, predictive algorithms, and automating processes. Who’s the new-age hero quenching this thirst? You guessed it right - software developers.

2024 has also given developers a turbo boost to transcend the traditional domain boundaries. Health-tech, Edutech, Agri-tech - you name it, and there’s a high demand for skilled developers. One day you could be putting your coding skills to work to improve a Fitness App, and the next, you might find yourself creating a virtual farming assistant. Now, how's that for diversity.

Ah, and did we talk about the burgeoning gig economy? Well, if you still picture yourself in a 9-to-5 routine, it’s time for a reality check. Companies are bidding a fond farewell to geographical limitations, and thus, remote work is no longer a perk but a norm. So, you could be chilling on the beaches in Bali with a margarita in one hand and your laptop in the other. Just remember to get your time zones right!

One field that seems to be gaining momentum is Cybersecurity. As Dennis Hughes from the FBI once said, "The only secure computer is one that's unplugged, locked in a safe, and buried 20 feet under the ground in a secret location... and I'm not even too sure about that one." In 2024, developers who can crack codes while preventing others from doing the same are more valuable than ever before.

Furthermore, a new trend is emerging for developers to have a wide berth of soft skills. Being able to communicate effectively and work in teams is becoming as important as writing a slick piece of code. Employers are looking for versatility – someone who can code, design, innovate, and play nice with others.

So, if there's any takeaway here, it's that being a software developer in 2024 is not just about being a code ninja anymore. It’s about understanding and leveraging technology to make the world a better place. It’s about wearing multiple hats and delivering quality solutions across domains. And, most importantly, it’s about ensuring that should an AI like Johnny Depp's ever come to life, it’s friendly.

The job market for software developers is zestier, merrier, and more exciting than ever before. It’s a smorgasbord of opportunity: dig in, enjoy the spread, and never stop learning. It's an excellent time to break out of the shell, keep your skills razor-sharp, and ride this wave. After all, the future is now, and it’s coded.

The web developer roadmap for 2024:

Roy Weru — Wed, 31 Jan 2024 18:06:34 +0000

Web development is a rapidly evolving field, and staying up-to-date with the latest technologies and trends is essential for success. In this article, we’ll explore the web developer roadmap for 2024, covering the basics of web development, the tools and technologies to learn, and the tips for preparing for the job market.

What is web development?
Web development is the process of creating a digital environment that is intuitive, responsive, and engaging. It involves combining the aesthetics of frontend development and the functionality of backend development, using technologies like HTML, CSS, JavaScript, and frameworks.

The role of web developers
Web developers are responsible for creating websites and applications using frontend and backend technologies. They work with clients, designers, and other developers to ensure that the final product meets the requirements. They also test, debug, and deploy code to ensure that it is working correctly.

How long does it take to become a web developer?

Learning the basics of HTML, CSS, and JavaScript can take anywhere from 3 to 6 months. Building simple websites and learning advanced topics can take 1 to 2 years. Choosing the right framework and learning backend development can take additional time.

_Tools for web development _

Text editors like Visual Studio Code, Sublime Text, Atom, and JetBrains are popular choices for web developers. They offer features like auto-completion, syntax highlighting, extensions, and keyboard shortcuts. GitHub is a popular platform for code repositories, version control, collaboration, and hosting.
_
HTML, CSS, and JavaScript HTML_ is used for structuring web pages, using semantic markup and elements. CSS is used for styling web pages, using layout techniques like flexbox and grid. CSS preprocessors like Sass and frameworks like Bootstrap, Materialize, and Tailwind can help streamline the development process. JavaScript is used for creating dynamic user experiences, using core concepts and modern features. TypeScript can be used to add static typing to JavaScript, improving code quality and reliability.

JavaScript frameworks and libraries React, Vue, Svelte, and Angular are popular choices for creating modern web applications. React is known for its component-based architecture and reusable UI elements. Vue is known for its progressive framework and approachable learning curve. Svelte is known for shifting the work to compile time and reducing the need for virtual DOM diffing. Angular is known for its support for complex applications and TypeScript.

Preparing for the job market

To prepare for the job market, it’s important to show your potential by building projects, pushing code to GitHub, and showcasing your work. Having strong problem-solving skills and knowing data structures and algorithms is also important. Learning how to use terminal, git, and developer tools is essential. Exploring backend development and learning server-side languages and databases can also be beneficial.

I hope this helps! Let me know if you have any other questions....👨🏾‍💻👨🏾‍💻👨🏾‍💻💯💯

The Rising Era of AI: How Artificial Intelligence is Taking Over the Coding World and Transforming Programming Jobs

Roy Weru — Thu, 04 Jan 2024 12:39:17 +0000

_The Impact of AI on Programming Jobs_

In recent years, programming has been shaping the world as we know it in a constantly evolving way. Nevertheless, with the advent of artificial intelligence (AI), the question arises: Will AI replace programmers in the future?

Advancements in AI and Programming

Artificial intelligence has already made remarkable strides in various industries, and programming is no exception. AI-powered tools and technologies are being developed to streamline and automate various aspects of the programming process. From code generation to bug fixing, AI is revolutionizing the way programmers work.

Automation and Efficiency in Programming

AI has the potential to automate repetitive and mundane programming tasks, enabling programmers to focus on more creative and complex problem-solving. With AI algorithms capable of writing code, developers can leverage these tools to accelerate development cycles and increase productivity. However, this doesn't necessarily mean that programmers will become obsolete.

Evolution of Programming Roles

While AI can automate certain programming tasks, it cannot replicate the creative thinking, intuition, and domain expertise that human programmers bring to the table. As AI takes over routine tasks, programmers will need to adapt and embrace new roles that involve overseeing AI systems, designing complex algorithms, and applying their expertise to tackle challenging problems.

AI-Powered Tools for Programmers

Program Writing Assistance

AI-powered programming tools can assist developers by generating code snippets based on predefined requirements. These tools analyze existing codebases, identify patterns, and provide suggestions, saving programmers time and effort in writing repetitive code segments.

Bug Detection and Resolution

AI can help identify and fix bugs in code by analyzing vast amounts of data, identifying patterns, and making accurate predictions. Programmers can leverage AI-powered bug detection and resolution tools to streamline the debugging process, leading to more efficient and reliable software development.

Project Delivery Estimation and NLP

Estimating project delivery timelines is a crucial aspect of software development. AI can analyze historical data, project complexity, and various other factors to provide accurate delivery estimations. This helps project managers and programmers plan their work effectively and meet deadlines more consistently. Natural Language Processing (NLP) is an AI subfield that focuses on enabling machines to understand and interpret human language. NLP can assist programmers in tasks such as code documentation, requirement analysis, and code comprehension. By understanding human language and translating it into executable code, NLP-powered AI systems can enhance programmer productivity and efficiency.

Enhancing Code Quality with AI

Code Optimization

AI algorithms can analyze codebases and identify areas where optimization is possible. By suggesting code improvements and performance optimizations, AI can help programmers create more efficient and robust software solutions. This not only enhances the overall quality of the code but also improves the software's performance and user experience.

Human Intelligence vs. AI Writing Code_

AI has not yet reached the level of being able to replace programmers and human intelligence. Currently, it is part of the "augmented" developer movement, which allows users to write code faster and with fewer bugs. Furthermore, it can help a lot of people break into the tech industry.

Collaboration and Coexistence in Programming

The future of programming lies in collaboration between human programmers and AI systems. Programmers can leverage AI technologies to boost their productivity, accelerate development cycles, and enhance the quality of their code. AI can handle routine tasks, freeing up time for programmers to focus on higher-level design, architecture, and innovation. The coexistence of human intelligence and AI in programming will lead to more efficient, intelligent, and innovative software solutions.

The Future of Programming and AI

Complementing Rather Than Replacing

While AI is undoubtedly transforming the programming landscape, it is more likely to complement human intelligence rather than completely replace programmers. AI excels at automating repetitive tasks and offering suggestions, but it still lacks the creative and critical thinking abilities of humans. The synergy between human programmers and AI technologies will be crucial for innovation and problem-solving in the future.

Collaboration Between Human Programmers and AI Systems

The future of programming is shaped by the increasing influence of artificial intelligence. While aitechnologies have the potential to automate certain programming tasks, they are unlikely to replace programmers entirely. Instead, AI will empower programmers, making them more productive, efficient, and capable of delivering high-quality software solutions. The collaboration between human intelligence and AI systems will drive the future of programming, leading to continuous innovation and advancements in the field.

What is the impact of AI on the coding world?

Artificial intelligence is revolutionizing the coding world by automating repetitive tasks, assisting in code writing, bug detection, and resolution. It enhances code quality, accelerates development cycles, and improves overall productivity and efficiency.

How is AI shaping the future of programming?

AI is shaping the future of programming by complementing human intelligence and automating routine tasks. It allows programmers to focus on higher-level design, architecture, and innovation, leading to more efficient and innovative software solutions.

What are the advantages of AI in programming and coding?

AI in programming and coding offers numerous advantages, including automation of repetitive tasks, code generation, bug detection, and resolution. It enhances productivity, efficiency, and code quality, allowing programmers to deliver high-quality software solutions.

Will AI completely replace the need for human programmers?

No, AI is unlikely to completely replace the need for human programmers. While it can automate certain tasks, human programmers bring creative thinking, intuition, and domain expertise that are essential for innovation and problem-solving in programming. The future of programming lies in collaboration between human programmers and AI systems.

please don't forget to leave a like and follow ..😍😍😊

Bootstrap CSS vs Tailwind CSS .Let's settle the discussion.

Roy Weru — Sun, 23 Jul 2023 12:31:34 +0000

Hello everybody, I have had people coming up to me with the question, which is a better CSS framework between bootstrap and tailwind, well here is my opinion.

In the world of web development, choosing the right CSS framework can significantly impact your workflow and productivity. Among the popular choices, Bootstrap CSS and Tailwind CSS have emerged as two of the most powerful and versatile front-end frameworks. While both aim to simplify the process of building attractive and responsive websites, they take different approaches to achieve this goal. In this blog guide, we will dive into the features, pros, and cons of Bootstrap CSS and Tailwind CSS, helping you make an informed decision about which one suits your project needs best.

Bootstrap CSS is one of the oldest and most widely used CSS frameworks. Developed by Twitter, it offers a plethora of pre-designed components, templates, and utilities to streamline web development. Its primary focus is on providing a robust grid system, responsive layout, and ready-to-use UI components, allowing developers to create responsive and visually appealing websites with ease.

Tailwind CSS, on the other hand, is a relatively newer framework that gained rapid popularity for its unique utility-first approach. Instead of relying on pre-designed components, Tailwind CSS provides an extensive set of utility classes that you can combine to build custom and highly optimized designs. This approach offers greater flexibility and control over the appearance and functionality of the website.

Personally, I think both of these are great tools and I don't have one that is more favorite than the other. As a front-end developer or full stack dev, it is always wise to have a plan before starting on a project. When you have a strategy, you can now decide which tools you need to implement. Both of the frameworks have their pros and cons. According to my experience bootstrap is very smooth and easy to use with normal HTML. I have had great experiences working with bootstrap in Django, flask projects that basically render the raw HTML. Its so easy to set-up bootstrap with such. All you need is to have bootstrap linked to your main template and it becomes so easy to integrate.

Bootstrap CSS Features:

Grid System: Bootstrap CSS offers a responsive, mobile-first grid system that allows you to create flexible layouts for different screen sizes.
Pre-styled Components: It comes with a wide range of pre-built components like buttons, forms, navigation bars, modals, and more, making it easy to create consistent designs.
Browser Compatibility: Bootstrap CSS ensures compatibility across various browsers, reducing the need for extensive testing.
Customizable Themes: The framework supports theming, enabling developers to create unique and branded designs by customizing the default styles.

This are some of the pros of working with bootstrap:
Quick Prototyping: With ready-made components, developers can rapidly prototype and create functional designs.
Community and Documentation: Bootstrap CSS has a large and active community, providing extensive documentation and support.
Browser Compatibility: It ensures consistent rendering across various browsers, saving developers time and effort.

and this are the cons:
Bloated CSS: Using pre-designed components may lead to bloated CSS files, impacting performance.
Design Limitations: The pre-styled components may sometimes limit creativity and make designs look generic.

When it comes to tailwind CSS it's another different story. Basically I think Tailwind is so easy and great to use with Frameworks such as Next JS, Svelte, Vite and so on. They have offered a documentation which shows a step by step guide to get started on whichever framework you are using, even on simple HTML Getting started with Tailwind:

One thing though that might blow your mind🙌🙌🫢 is the Float UI which is just wonderful

It is library built on top of Tailwind offering beautiful and sexy components needed to style up your website:

Here is an example of a code I just pasted and implemented to bring out a beautiful and cool component for my webpage:

This is a finished up website with Tailwind and Next JS. I have a step by step guide to building such a website Link:

Tailwind CSS features:
Utility-first Approach: Tailwind CSS's utility classes allow developers to apply styles directly in the markup, providing more control and speeding up development.
Low Specificity: The utility classes are designed to have low specificity, making it easier to override styles without using !important.
Configurability: Tailwind CSS is highly configurable, allowing developers to add, modify, or remove utility classes based on their project requirements.
PurgeCSS: It includes PurgeCSS by default, which automatically removes unused CSS classes, resulting in smaller file sizes for production.

The pros and cons of working with Tailwind CSS.
pros:
Customizable: Tailwind CSS offers complete design freedom, enabling developers to create unique designs without writing custom CSS.
Performance: Its utility-first approach and PurgeCSS result in optimized and lightweight production-ready code.
Highly Scalable: Tailwind CSS scales well for large projects due to its modular and organized utility classes.

cons:
Learning Curve: Developers new to Tailwind CSS might face a learning curve when getting used to the utility classes.
Larger HTML Files: The utility classes applied directly in HTML can make the markup larger and less clean.

I would like to wrap up with a reminder that both of this frameworks are very powerful and of great essence but it's up to you to make a decision on which one you would prefer.

Let's keep up with the discussion in the comment section I would love to hear from you 😊😉😁 and another developer would want your opinion. Follow me on my upcoming twitter account twitter, you can also check out my GitHub GitHub. I will appreciate ❤️❤️👍 thanks.

A STEP BY STEP GUIDE TO CREATING A FULL STACK WEB APP USING NEXT JS AND SUPABASE 🙌🙌💥..

Roy Weru — Sun, 09 Jul 2023 16:02:33 +0000

In today's digital era, applications play a vital role in our lives, providing instant access to information and services. If you have a passion for baking or want to share your favorite cake recipes with the world, building a cake recipe application can be an exciting project. In this blog post, we will guide you through the process of creating a cake recipe application using Supabase and Next.js, two powerful tools that make development efficient and enjoyable.

What is Supabase?
Supabase is an open-source Firebase alternative that provides a set of backend services, including authentication, database, and real-time functionality. It allows you to rapidly build web and mobile applications without the need for server-side development. With Supabase, you can easily handle user authentication, store data, and implement real-time updates.

Why choose Next.js?
Next.js is a popular React framework that enables server-side rendering (SSR) and provides an excellent development experience. It offers features like automatic code splitting, server-side rendering, and static site generation, making it a perfect choice for building performant and SEO-friendly applications. Next.js also provides an intuitive routing system and seamless integration with React components.

To get started, make sure you have Node.js and npm installed on your machine. Here's how you can set up the project:

Create a new Next.js project by running the following command make sure to include tailwind:
`

`
npx create-next-app cakes

`
`
I named mine cakes but you can name yours anything you are comfortable with.

Navigate into the project directory:
cd cakes

Install Supabase client library and dependencies:
npm install @supabase/supabase-js

Head over to supabase.com and register for an account or you can simply log in with your GitHub account. Create a database and create a new table. Interesting thing about supabase is that it gives a very friendly UI and is very easy to work with I just love it:

I created a table and named it Cakes:

once you are done head over back to vs studio so that we can start working on our project 😊😊

Designing the User Interface:
Next.js provides various options for styling your application, including CSS modules, styled-components, or tailwind CSS. Choose the one that suits your preferences. Create a layout and component structure for your application, including pages for the home screen, recipe list, and individual recipe details.

Personally I used Float UI , I can guarantee you that this is a game changer in the design of the front-end working🔥with tailwind 💥👌👌🔥.Just head over to their website Float UI and you can see the amazing components that they have:

Its just a copy and paste. I will be importing some code from Float UI. You can run the *npm run dev * command in your cli to make sure that your Next js website is up and running correctly. You can now start designing your webpage to fit your design. Im going ahead to create a components directory inside of my src/app directory:

Create a file named Nav.tsx and head over to Float UI to get the code .You can pick one of the Navbars that fit your intrest and copy paste the code:

import the Nav component to your main layout.tsx and have it inside the body tag just before {children}:

We first need to fetch data from supabase which we can work with. Lets start by creating a file named supabase.js in the root directory.

We need to head over to supabase and get the public anon key which we will later add to our .env.local file and the url which we will need.

Open your project settings in supabase go to API:

You will need both the url and anon public. Copy paste the supabase anon key in your.env.local file that you have created in the root directory:

Back to the supabase.js file have the code below:

copy and paste your supabase url.

In the main page.tsx fetch the data with the help of useEffect hook and useState hooks :

Make sure you have created a table and input some data to be fetched. Supabase offers a simple GUI to help you achive this. Make sure that you disable the row level security first as nothing will be returned but an empty array:

My table basically has five columns the id and created_at are there by default . I added the title column which is a text field, image for the image url which is a varchar field and the recipe column which is a text field.

Once you have added data to your rows you can check out the APIs offered by supabase for your table.

In the components directory have a Cards component where data will be mapped over and be displayed to the client in different cards. I passed over the data that I fetched as a prop.

An advantage of using typescript is that it comes in handy when defining the model in your database where you can create a type/interface which will make it easier while working with your data. I do this by having my types in the types.d.ts file in the root directory

This was my final result 🔥🧯:

coming up soon with another blog on how to add row level security and implement it in your tables for extra security.

Please show some love by heading over to my GitHub repository Github Repo and adding a star 😊😊. I will be grateful see you soon