Development

Free Source Codes That You Can Use For Your Software Apps

Krešimir Galić

Krešimir

25.05.2023

Free Source Codes That You Can Use For Your Software Apps

The core of a computer program is called the source code. It is the part of a software computer users never see. But some times, writing codes could be stressful and that's how accessible source codes comes into the picture, Join us as we share some of our own at Front Tribe.

The core of a computer program is called the source code, which is produced by a programmer and frequently takes the form of functions, descriptions, definitions, calls, procedures, and other operational declarations. Most computer users never see the "source code," which is the portion of the software that computer programmers can alter to enhance how a piece of software (a program or application) works. It could be by adding new features or repairing any areas that don't always function properly, or a combination of both. 

Source code and object code are commonly referred to as the before and after versions of a compiled computer program. An Integrated Development Environment (IDE), such as a Software Development Kit (SDK), a text editor, or a visual programming tool are all options for programmers to employ when writing source code. Also, there are management systems that assist programmers in classifying and keeping track of various states and levels of source code files in large program development environments.

However, some software has source code that can only be changed by the person, group, or company that produced it and has sole control over it. Such software is referred to as "proprietary" or "closed source" software. This implies that only the original creators of proprietary software can legally copy, inspect, and alter such software. Also, in order to utilize proprietary software, users must affirm that they will not use it for any purpose that the product's creators have not specifically authorized (often by signing a license displayed the first time they run the software). Examples of proprietary software are Adobe Photoshop and Microsoft Office.

For Free and Open-source software, its creators make the source code accessible to anyone who wants to look at, copy, modify, or share the code. Users of open-source software must agree to the licensing terms just like those for proprietary software, although the legal terms of open-source software are very different from those for proprietary software. Examples of open-source software include the GNU Image Manipulation and LibreOffice.

Now let's take a look at some free source codes you can use to develop simple software apps. 

1) JavaScript Code To Build a Mobile Calculator Software

// get the calculator display element

const display = document.querySelector('.calculator .display');

// initialize the calculator state

let firstOperand = null;

let operator = null;

let secondOperand = null;

// add click event listeners to the calculator buttons

const buttons = document.querySelectorAll('.calculator .buttons button');

for (const button of buttons) {

  button.addEventListener('click', () => {

    const value = button.textContent;

    

    if (value === 'C') {

      // clear the calculator display and state

      display.textContent = '';

      firstOperand = null;

      operator = null;

      secondOperand = null;

    } else if (value === '+' || value === '-' || value === '*' || value === '/') {

      // set the operator and first operand

      operator = value;

      firstOperand = parseFloat(display.textContent);

      display.textContent = '';

    } else if (value === '=') {

      // evaluate the expression and display the result

      secondOperand = parseFloat(display.textContent);

      const result = calculate(firstOperand, operator, secondOperand);

      display.textContent = result;

      firstOperand = result;

      operator = null;

      secondOperand = null;

    } else {

      // append the digit to the calculator display

      display.textContent += value;

    }

  });

}

// helper function to evaluate the expression

function calculate(a, operator, b) {

  if (operator === '+') {

    return a + b;

  } else if (operator === '-') {

    return a - b;

  } else if (operator === '*') {

    return a * b;

  } else if (operator === '/') {

    return a / b;

  }

}

2) Native React code to Build A Gaming App 

import React, { Component } from 'react';

import { Text, View, TouchableOpacity } from 'react-native';

export default class Game extends Component {

  constructor(props) {

    super(props);

    this.state = {

      score: 0,

    };

  }

  handlePress = () => {

    this.setState(prevState => ({ score: prevState.score + 1 }));

  }

  render() {

    const { score } = this.state;

    return (

      <View>

        <Text style={{ fontSize: 32, textAlign: 'center' }}>Score: {score}</Text>

        <TouchableOpacity onPress={this.handlePress} style={{ backgroundColor: 'blue', padding: 20, borderRadius: 5 }}>

          <Text style={{ color: 'white', fontSize: 24 }}>Click me!</Text>

        </TouchableOpacity>

      </View>

    );

  }

}

3) Supabase Code To Create Auth For A New User And Insert Their Data Into A "Users" Table

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-id.supabase.co';

const supabaseKey = 'your-supabase-key';

const supabase = createClient(supabaseUrl, supabaseKey);

// create a new user and insert their data into the "users" table

const createUser = async (email, password, name) => {

  const { user, error } = await supabase.auth.signUp({

    email: email,

    password: password,

  });

  if (error) {

    console.log(error);

    return;

  }

  const { data, error: insertError } = await supabase

    .from('users')

    .insert([{ name: name, email: email }])

    .single();

  if (insertError) {

    console.log(insertError);

    return;

  }

  console.log('User created successfully:', data);

};

// call the createUser function with the user's data

createUser('testuser@example.com', 'testpassword', 'Test User');

In this example, we first import the Supabase client library and create a new client instance using our Supabase URL and API key. We then define a function called createUser that takes an email, password, and name as arguments.

Inside the createUser function, we use the supabase.auth.signUp method to create a new user with the given email and password. If there is an error during sign-up, we log the error and return.

If the sign-up is successful, we use the supabase.from('users').insert method to insert the new user's name and email into a "users" table in our Supabase database. We then log a success message with the inserted data.

Finally, we call the createUser function with some test user data to create a new user in our Supabase database.

This is just a simple example of how to use Supabase. You can use the Supabase client library to perform a wide range of database operations, including querying data, updating records, and handling authentication. 

4) Using Angular to build a Diary App For Android 

import { Component } from '@angular/core';

@Component({

  selector: 'app-diary',

  template: `

    <div>

      <h1>{{title}}</h1>

      <div *ngFor="let entry of entries">

        <h2>{{entry.title}}</h2>

        <p>{{entry.content}}</p>

        <small>{{entry.date | date:'shortDate'}}</small>

      </div>

    </div>

  `,

})

export class DiaryComponent {

  title = 'My Diary';

  entries = [

    {

      title: 'My first entry',

      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',

      date: new Date('2022-01-01'),

    },

    {

      title: 'My second entry',

      content: 'Vestibulum ac velit eu ante viverra interdum non non velit.',

      date: new Date('2022-01-02'),

    },

  ];

}

This code defines a simple Angular component called DiaryComponent that displays two diary entries. You can modify this code to suit your needs and add more functionalities as required.

5) Using React Framework to build An E-commerce App

import React, { useState } from 'react';

// Sample product data

const products = [

  { id: 1, name: 'Product 1', price: 10 },

  { id: 2, name: 'Product 2', price: 20 },

  { id: 3, name: 'Product 3', price: 30 },

];

function App() {

  const [cartItems, setCartItems] = useState([]);

  // Function to add a product to the cart

  const addToCart = (product) => {

    setCartItems([...cartItems, product]);

  };

  return (

    <div>

      <h1>Ecommerce App</h1>

      <h2>Products</h2>

      <ul>

        {products.map((product) => (

          <li key={product.id}>

            {product.name} - ${product.price}

            <button onClick={() => addToCart(product)}>Add to Cart</button>

          </li>

        ))}

      </ul>

      <h2>Cart</h2>

      {cartItems.length === 0 ? (

        <p>Your cart is empty</p>

      ) : (

        <ul>

          {cartItems.map((item) => (

            <li key={item.id}>

              {item.name} - ${item.price}

            </li>

          ))}

        </ul>

      )}

    </div>

  );

}

export default App;

This code defines an App component that displays a list of products and a cart. The products array contains sample data for the products, and the cartItems state is used to keep track of the items in the cart.

The addToCart function is used to add a product to the cart when the "Add to Cart" button is clicked. It does this by updating the cartItems state with the new item.

The component renders the list of products using the map function to iterate over the products array. It displays the product name, price, and an "Add to Cart" button that calls the addToCart function when clicked.

The component also renders the cart by checking if cartItems is empty. If it is, it displays a message saying the cart is empty. If it's not, it displays a list of the items in the cart.

This is just a basic example, and you can customize and add more features based on your e-commerce app requirements.

In summary

Using free source codes for your project can be a good option if you carefully evaluate the cost-effectiveness, time-saving factor, code quality, and compatibility, and have the right to use it for your project (copyright). 

However, it's important to keep in mind that free source codes may not have all the features you need, and you may need to customize or build additional functionality yourself. Sometimes, it can be difficult to determine the quality of the source code, and it may contain bugs or security vulnerabilities.

More to learn from us