We created a UI Library in React for Adidas's internal use cases.

ADIDAS UI LIBRARY

Arzuhalci

HitClub is a livestream fitness application that serves its users with a subscription system. Hilton hotels in Istanbul use the app for their gym facilities.

HITCLUB

Build and Host Backend and Frontend with Next.js, Parse Server, Back4App and Cloudflare

In this tutorial, we will guide you through the process of creating a full-stack web application using

Before we begin, make sure you have the following:

First go to the directory where you want to create the project. Then run the following command:

After running that command, you have to answer several questions about your project. For the sample project, it will be sufficient to make the following selections:

 in your browser to see your Next.js app running locally. If you see the following page, your Next.js project is ready to use:

 Now we can move on to the backend preparations.

To register a Back4App account, first go to the

After registration, on this screen we select the Backend as a Service option.

Then on this screen, you can give your application the name you want and continue.

After a short loading screen you will see this screen. Congratulations, you have created your Back4App application!

Now we will create a simple project consisting of CRUD operations.

First, let’s install the react-icons package required for the icons in our project:

The file structure of our project is like this:

Let’s now install the only needed dependency, Parse JavaScript SDK, to integrate your App with Back4App servers. Run the following command on your project root directory:

We can write our Create, Read, Update, and Delete operations in the

command, add a new person with the Add Person button.

  You’ve saved a data object from Back4App. You can also check the data on your App Dashboard and clicking on

Go to your Back4App App’s Dashboard and get your App Keys under

. Note that you will need two keys to connect with Back4App, the

Before deploying your frontend, set up a Git repository for your project. After setting up your project and pushing it to GitHub or GitLab, the next step is to deploy your website using Cloudflare Pages. Here’s a step-by-step guide on how to do this:

Choose the git repository that contains your project. Then click the Begin Setup button.

 All we need to do in this step is to select Next.js from the Framework preset section and then click the Save and Deploy button.

After a short wait, your website will be deployed. You can go to your website by clicking on the link.

If you see this error when your site opens, don’t worry.

Select Workers - Pages and in Overview, select your Pages project.

Select Settings - Functions - Compatibility Flags.

Add the nodejs_compat compatibility flag to your Preview and Production deployments.

After saving both with the save button, go to the Workers & Pages section again. Click on the View Details button at the bottom right of your project.

Click on the Manage Deployment button at the top right and select the Retry Deployment option. After a short wait, your site will be deployed again and you will no longer see any errors when you go to your site.

and log in to your account. If you don’t have an account, you’ll need to create one.

On your account’s homepage, go to Workers & Pages from the left menu. Then go to the pages section. This is where you will manage your deployments.

Click on the “Connect to Git” button and connect your GitHub or GitLab account. You’ll need to authorize Cloudflare Pages to access your repositories.

To explore the code and experience the example project live, you can access the following links:

In this tutorial, you have learned how to build a full-stack web application using Next.js, Node.js, Parse Server, Back4App, and Cloudflare. You now have the knowledge to create and deploy your projects. Consider extending your application’s features and sharing your creations with the community.

Ionic Appflow Live Updates is a game-changer for Ionic app development, empowering developers to push updates in real-time, enhance user experiences, and streamline the development process. By leveraging this powerful feature, you can reduce development cycles, improve user satisfaction, and stay ahead in the competitive world of mobile applications. Embrace Ionic Appflow Live Updates today and witness the power of seamless and efficient app deployment.

Conclusion:

Ionic Appflow Live Updates is a feature provided by Ionic Appflow, a powerful mobile DevOps solution for building, deploying, and monitoring Ionic applications. Live Updates allows developers to deploy code changes, UI modifications, bug fixes, and feature enhancements directly to users' devices without requiring them to download and install updates from an app store.

1. What are Ionic Appflow Live Updates?

Ionic Appflow Live Updates leverages the power of native code updates and app binary differencing. When developers make code changes and commit them to their version control system, Appflow detects those changes and generates a new update package. This package contains only the difference between the previous version and the new version, minimizing the size of the update.

2. How does Ionic Appflow Live Updates work?

A) Real-time updates: With Ionic Appflow Live Updates, you can roll out critical bug fixes, UI improvements, and feature enhancements to your users instantly. There's no need to wait for app store approvals or for users to manually update their apps.

B) Reduced development cycles: Live Updates empowers developers to iterate and experiment faster. You can deploy changes and see the results in real-time, allowing for rapid development cycles and quicker feedback loops.

C) Seamless user experience: By eliminating the need for app store updates, Live Updates ensures a seamless user experience. Users can continue using the app without interruption while benefiting from the latest improvements.

D) Time and cost savings: With Live Updates, you can significantly reduce the time and effort required to roll out updates. This results in cost savings by minimizing the need for extensive app store submissions and reducing user support for outdated versions.

3. Benefits of using Ionic Appflow Live Updates:

Ionic Appflow Live Updates prioritizes security to protect both developers and end-users. Updates are cryptographically signed to ensure integrity, and users have complete control over which updates they accept. Additionally, Ionic Appflow provides robust access controls and allows you to manage permissions for team members, ensuring that only authorized individuals can deploy updates.

4. Security considerations:

A) Plan and test: Before deploying updates, thoroughly plan and test your changes to ensure they work as intended. Ionic Appflow provides pre-production channels to test updates with a subset of users before rolling them out to the entire user base.

B) Versioning: Use proper versioning practices to keep track of updates. Semantic versioning (e.g., MAJOR.MINOR.PATCH) can help you manage updates effectively.

C) Monitoring and rollbacks: Continuously monitor the impact of updates on user experience and app performance. Ionic Appflow provides metrics and analytics to help you make data-driven decisions. If an issue arises, you can easily roll back to a previous version to maintain app stability.

5. Best practices for using Ionic Appflow Live Updates:

Enhancing Productivity with Ionic Appflow Live Updates for Seamless App Management

In this blog post, we explored how to integrate Stripe into a React application. By following the steps outlined above, you can successfully incorporate Stripe's payment processing capabilities into your React projects, allowing you to accept online payments securely and seamlessly.

• Visit the official Stripe website and click on the 'Sign Up' button.
• Fill in the required information, including your email, password, and business details.
• Follow the instructions to verify your email address and activate your Stripe account.

1. Creating a Stripe Account:

• Ensure that Node.js is installed on your computer.
• Open your preferred terminal and navigate to the directory where you want to create your React project.
• Run the following command to create a new React project using Create React App:

2. Setting Up a React Project:

• Log in to your Stripe account.
• Click on the 'Developers' section in the left sidebar.
• Select 'API Keys' and copy both the 'Publishable key' and 'Secret key' for later use.

3. Obtaining Stripe API Keys:

• In your terminal, ensure that you are in the root directory of your React project.
• Run the following command to install the Stripe library:
• The library will be added to your project's dependencies.

4. Installing the Stripe Library:

• In your React project, create a new component called 'PaymentForm.js'.
• Import the Stripe library at the top of your component:
• Initialize Stripe using your publishable API key:
• Create a form with the necessary input fields for payment details.
• Handle form submission and validate the input data.
• Use the 'stripePromise' object to create a new payment method and process the payment.

5. Implementing the Stripe Integration:

• In your terminal, run the following command to start your React development server:
• Open your React application in your browser and test the payment form.
• Once you are satisfied with the integration, deploy your React application to production.
• Replace the test API keys with live API keys from your Stripe account.
• Ensure that your production environment is properly secured and your API keys are kept confidential.

6. Testing and Using Stripe in Production:

Utilizing Stripe for Payment Integration in a React

Integrating the Vonage OpenTok API with React empowers developers to build powerful, real-time video chat applications. React's component-driven approach combined with the flexibility and reliability of the OpenTok API enables the creation of immersive user experiences. Whether you are building video conferencing platforms, online classrooms, or social applications, the combination of Vonage OpenTok and React provides a solid foundation for delivering seamless real-time communication to your users.

The Vonage OpenTok API provides a comprehensive set of tools and services for building live video, voice, and messaging applications. It offers scalable infrastructure, SDKs, and a rich set of APIs that allow developers to integrate real-time communication features into their applications effortlessly. With OpenTok, developers can enable video chat, screen sharing, recording, and more, providing a seamless and engaging user experience.

1. Understanding Vonage OpenTok API:

React, developed by Facebook, is a widely adopted JavaScript library for building user interfaces. It simplifies the process of creating interactive and reusable UI components by utilizing a declarative approach. React's virtual DOM efficiently updates the user interface, making it an excellent choice for building dynamic web applications.

2. Getting Started with React:

A) Setting Up a React Project: Begin by setting up a new React project using Create React App or your preferred method. Install the required dependencies, including the Vonage OpenTok JavaScript SDK.

B) Initializing the OpenTok Session: Import the OpenTok library into your React component. Create a session object by calling the 'OT.initSession()' method, passing in your OpenTok API key and session ID.

C) Connecting to the OpenTok Session: Subscribe to important session events such as 'sessionConnected', 'sessionDisconnected', etc. Use the 'OT.connect()' method to connect to the session.

D) Publishing and Subscribing to Streams: Generate a publisher object using the 'OT.initPublisher()' method to capture the user's video and audio. Publish the publisher stream to the session using the 'session.publish()' method. Subscribe to incoming streams using the 'session.on('streamCreated')' event and display them within your React components.

E) Implementing Additional Features: Leverage the OpenTok API to enable screen sharing, recording, text chat, and other interactive features. Utilize React's state management and component lifecycle methods to control the behavior of these features within your application.

3. Integrating Vonage OpenTok API with React:

A) UI Customization: Use React's component-based architecture to create a visually appealing and intuitive user interface for your video chat application. Implement features such as participant lists, mute/unmute buttons, video controls, and more.

B) Responsive Design: Leverage React's responsive design capabilities to ensure your application adapts seamlessly to different screen sizes and devices.

C) Error Handling and Exceptional Cases: Implement error handling mechanisms to gracefully handle scenarios like network disruptions, failed connections, or unsupported browser environments. Utilize React's error boundaries to capture and display errors without breaking the application's overall functionality.

4. Enhancing User Experience:

A) Deployment: Choose a suitable deployment platform for your React application, such as Netlify, Vercel, or Heroku. Configure the necessary build and deployment processes specific to your chosen platform.

B) Scaling: Vonage OpenTok API provides scalable infrastructure, allowing your application to handle a growing number of concurrent video sessions. Monitor and optimize server-side performance to ensure a smooth experience for your users as your application scales.

5. Deploying and Scaling:

Discovering the Versatility of Vonage OpenTok API Features through React Integration

Explore a streamlined workflow for building and hosting web applications using Next.js for frontend, Parse Server and Back4App for backend, complemented by Cloudflare's performance optimizations.

Build and Host Backend and Frontend with Next.js, Parse Server, Back4App and Cloudflare.

Developers need a reliable and efficient way to deploy app updates. Ionic Appflow Live Updates streamlines the process.

Maximizing Efficiency with Ionic Appflow Live Updates.

This is where the Vonage OpenTok API and React come into play.

Exploring the Power of Vonage OpenTok API Features with React.

Stripe is a popular payment processing platform that enables easy and secure online payments.

Using Stripe in a React Application.

Blog

We use live chat technologies in Langugo.

Live Chat:

An integrated system with Apple Pay, Google Pay in mobile environments and Stripe for web environment.

Payment:

The system we developed converts the speech of the users into text and displays this text in the language of the recipient user.

Simultaneous translation:

You can design yourself great web and mobile pages.

You can build component libraries that you will use in your projects.

You can convert all of this to software code with one click and present a working demo to your customers.

Langugo is a shining example of our commitment to creating immersive digital experiences. This mobile application offers users an opportunity to learn and practice various languages by connecting with native speakers for live chat. We developed a simultaneous translation system that converts speech into text and displays it to the recipient user in their language. An integrated payment system with Apple Pay, Google Pay, and Stripe ensures a seamless user experience.

Langugo - Practice Any Language on Mobile

Sluice, a groundbreaking tool for designers, reflects our ability to innovate and deliver tailored solutions. As a mobile application prototype and documentation project, Sluice enables project managers to design pre-development mobile applications and monitor their progress. It provides features like design component libraries and conversion to software code, all with a single click.

Sluice - Groundbreaking tool for designers

Cleansquared is a cleaning platform that matches two Cleaning Agents to a single cleaning task, enabling faster and more efficient deep cleaning. Through our platform, you can locate, schedule, and pay for a cleaning in a single hand-held context, then let Cleansquared's team of vetted Cleaning Agents do the rest.

CLEANSQUARED

Community Connect Miner provides a 2-way connection between residents and the Home Owners Association. It allows residents to send GEO-targeted, 2-way communications for service requests from their mobile devices, including issues such as noise complaints, trash, code compliance, maintenance requests, and more. All communications can be sent directly from any Apple mobile device. Residents can also submit relevant Photos and Videos and track the progress of their requests. Information can also be sent from residential management and board members to residents. With Community Connect Miner, management can send residents important, subject-specific information directly to their mobile devices, providing them with the most relevant updates for their home, neighborhood, and community. GEO-targeted information can be delivered to residents as written messages, including photos and videos.

Community Connect

For all your project requests, you can contact us through the following communication channels.

Our journey has allowed us to form partnerships with a diverse range of organizations. Each partnership has been an opportunity to learn, innovate, and grow, which has significantly contributed to our development as a company. Our esteemed partners include Kale, Bein, Salesforce, THY, and Nike. We value each of these relationships and look forward to creating many more.

Our Valued Partners

Our journey in De Marke Labs is a blend of passion, dedication, and innovation. We're more than a software development company - we are a collective of problem solvers and creative thinkers, committed to turning complex challenges into simple, elegant solutions. We don't just craft digital masterpieces, we build long-lasting relationships with our partners.

Crafting Digital Masterpieces

Kale Sales Club is an education and social media platform for Kale Seramik’s dealers that we have developed for Kale Seramik. More than 5000 dealers will start to use it all over Turkey.

Kale Sales Club

 is an education and social media platform for craftsmen that we have developed for Kalekim. 40,000 craftsmen use this platform in Turkey.

Kale Craftsmen Club

Learn English, Spanish and more. Connect to native speakers and start live chat.

Marshall Club Card Application for service makers of Akzo Nobel in Turkey, With this exclusive club users can earn points and trade the points with real life goods like TV, Cellphones.

Marshall Club Card

We are happy to assist you in finding the best solutions for your business.

From ideation to implementation, we provide end-to-end solutions tailored to your business goals.

We provide the most suitable personnel resources for your business processes and deliver seamless services.

Outsourcing Support

We offer consulting services in analysis, design, coding, and testing for your planned or ongoing projects.

Project Consulting Support

Our teams solve all your project needs, following the latest developments and applying them effectively.

Turnkey Project Support

Our expert team is here to support innovative fields such as AI, AR-VR, and Blockchain.

R&D Support

By collaborating with leading companies in the industry, we successfully bring your projects to life.

Trusted Partner of Hundreds of Companies

Discuss your business needs with our sales team to find the best digital solutions.

Successful projects

Customer satisfaction

Outsource Consultancy

Comprehensive Solutions Tailored to Your Needs

In today's business world, having the right human resources is crucial to remain competitive...Our Outsource Solutions:Based on your company’s needs, we carefully select candidates...How We Work:We meet with you to analyze your needs in-depth and provide custom solutions...Why Us?<ul><li>Experience: We have successfully completed various outsourcing projects across different industries.</li><li>Flexibility: We provide resource management according to your needs at every stage of the project.</li><li>Reliability: All your processes are securely managed by us.</li></ul>

Outsource Support Services

Project development involves many complex stages, from analysis to implementation. At De Marke Labs, we provide comprehensive consulting services to ensure the success of your projects...Consulting Processes:We identify your needs at the beginning of the project and recommend the most suitable solutions...Why Us?<ul><li>Experience: We offer reliable consultancy services in every phase of your projects, leveraging our experience across different industries.</li><li>Technological Expertise: We use the latest technologies to maximize efficiency in your projects.</li><li>Project Success: We ensure your projects are completed on time and within your budget.</li></ul>

Project Consulting Services

The key to success in your projects is the professional management of all processes...Turnkey Process:We analyze your business goals and project requirements, then carefully plan and manage every stage...Why Us?<ul><li>Comprehensive Service: We manage your projects from start to finish, providing all the services you need from a single source.</li><li>Technological Diversity: With our expertise in various disciplines and technologies, we successfully complete complex projects.</li><li>On-Time Delivery: We deliver your projects on time and within your budget.</li></ul>

Innovation is one of the most important factors for achieving success in today’s business world...R&D Processes:We provide customized R&D solutions to bring your innovative ideas to life...Why Us?<ul><li>Advanced Technology Expertise: We have extensive experience in advanced technologies like AI, AR/VR, Blockchain, IoT, and game development.</li><li>Innovative Solutions: We provide creative solutions to even the most challenging projects, ensuring their success.</li><li>PoC Support: We develop your ideas at the PoC level and bring them to the real world.</li></ul>

We created a UI Library in React for Adidas’s internal use cases.

Adidas UI Library

Create petitions and simplify legal processes.

HitClub is a livestream fitness application that serves its users with a subscription system. Hilton hotels in Istanbul use the app for its gym facilities.

Bangii Sports

CleanSquared is a cleaning platform that matches two Cleaning Agents to a single task, enabling faster and more efficient deep cleaning.

CleanSquared

Community Connect Mizner provides a 2-way connection between residents and the Home Owners Association.

Kale Sales Club is an education and social media platform for Kale Seramik’s dealers. More than 5000 dealers will start to use it all over Turkey.

Kale Master Club is an education and social media platform for craftsmen developed for Kalekim. 40,000 craftsmen use the platform in Turkey.

Kale Master Club

Marshall ClubCard Application for service makers of Akzo Nobel in Turkey. Users can earn points and trade them for real life goods like TVs and Cellphones.

Silent Protect Residential is a powerful security technology built on the same platform as Shield Group's Silent Protect law enforcement technology.

Silent Protect Residential

Sluice is a mobile application prototype and documentation project. Project managers can design pre-development mobile applications and follow up during their process thanks to Sluice.

Would you like to take a closer look at our sample projects and their stories?

Our Projects

Create Petitions with Artificial Intelligence. Simplify Legal Processes

Our AI-based software instantly scans user-generated content, detecting inappropriate elements.

Powerful and Intelligent Content Control:

Easily update content acceptance criteria with our trainable structure.

Flexible and Updatable Content Management:

Our software safeguards users from malicious content, enhancing user experience.

Excellent Protection in User Experience:

Empower Your Space, Embrace Security: Where AI Meets Content Excellence

AI Content Moderation

Our platform utilizes AI to perform comprehensive CV analysis, streamlining the candidate evaluation process.

AI-Powered CV Analysis:

AI algorithms assess applicants based on qualifications, experience, and compatibility with job requirements.

Candidate Ranking:

Our platform automates the CV screening process, saving time by swiftly filtering applications.

Time-Saving Automation:

Unlocking Potential, Empowered by AI: Redefining CV Evaluation

DevTalent

Silent Protect Residential is a powerful security technology built on the same platform as Shield Group's Silent Protect law enforcement technology and was designed and built-in coordination with major law enforcement agencies. It gives Association residents world-class security technology that enables them to alert Association security 24/7 and provide security with the information they need to come to their aid quickly and effectively - protecting both resident's safety and property.

SILENT PROTECT

Sluice is a mobile application prototype and documentation project where project managers can design pre-development mobile applications and follow up during their process.

Our wide range of services are meticulously designed to transform your ideas into digital reality.

The foundation of any successful digital solution is robust backend architecture.|We create scalable solutions tailored to your business's unique needs.|Prioritizing secure data handling and seamless integration, we ensure your digital presence is reliable, fast, and secure.

Backend Development

We believe in building lasting relationships with our clients.|To us, project completion is not the end, but a new beginning.|We provide regular updates, prompt bug fixing, and performance optimization, ensuring your digital solutions always run at peak performance.

Maintenance & Support

Our mobile development service is centered around the end-user.|We understand that an application's success hinges on its user experience.|That's why we strive to create designs that are intuitive, ensuring seamless performance across multiple platforms.|We prioritize superior user experience, striving for perfection in every interaction.

Mobile Development

Every successful project begins with a comprehensive analysis and strategic planning.|Our experts guide you through every step of the process, providing efficient execution strategies to bring your vision to life.

Project Consultation

In the era of digitalization, having a compelling web presence is a necessity.|We focus on designing interactive interfaces with a responsive design that adapts to any device.|Our commitment to optimal performance and high user engagement sets us apart.

Get in touch