User interface for Trunion web app

Overview

Tronion UI

Run dev server:

npm run dev

Home page is in pages/index.js, the user pages are in pages/account directory, theme file utils/theme.js, modal component logic is already set from previous project and integrated with nextjs in the _document.js file, only redesign has to be done. off-canvas nav overlay hasn't been added. I used classNames to create variants for the reusable components.

All new components to be created are only variants of reusable components in the components/commons, directory except for:

  • Dashboard side bar
  • Dashboard task list and buttons
  • ICO countdown card

NOTE

  • All images have a wrapper for styling as conventional styling can't be used on the next/image component that has to be used in place of in a nextjs app.

Features

  • Styled Components for styling.
  • React Icons (Font Awesome)*.
  • React Toastify from previous project.
You might also like...
React project with Google Firebase API, create partys with admin view and user view. Users can ask topics to admin, and support other topics.

🧪 Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React Firebase TypeScript 🚀 Como executar Clone o projeto e acesse a pasta

Consuming GitHub API, showing user's profile and repositories, with ReactJS
Consuming GitHub API, showing user's profile and repositories, with ReactJS

GitHubProfiles Project made with ReactJS to practice API consuming using GitHub API, in order to show in a simple way user's profile and repositories.

TSDX React w/ Storybook User Guide

TSDX React w/ Storybook User Guide Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented wit

A ReactJS to-do-list website with image uploading features integrated with Firebase User Authentication and Firestore Database.
A ReactJS to-do-list website with image uploading features integrated with Firebase User Authentication and Firestore Database.

To Do List App (React) This project is hosted on https://todolist-app.xyz/ A responsive to-do-list website with image uploading features integrated wi

Ysauth - This library is helper to aws amplify (with Cognito user pool) authentication with react

Ysauth - This library is helper to aws amplify (with Cognito user pool) authentication with react

Famework agnostic and GDPR Compliance library to track user actions to Meta Pixel

Famework agnostic and GDPR Compliance library to track user actions to Meta Pixel. This library is a wrapper around Meta Pixel. The library does not depend on any frameworks or libraries, and can therefore be used within React, Vue, Angular and all others JS based applications.

Just a simple react iota prototype to send messages to the tangle through a web app
Just a simple react iota prototype to send messages to the tangle through a web app

REACT IOTA This is a test project of mine to get familiar with the iota.js library. The WebApp is build with react and let you send messages to the ta

Cat-viewer-app - A Web Application Made in React
Cat-viewer-app - A Web Application Made in React

Aplicación Web creada utilizando React Este proyecto fue creado con Create React

Blockchain-Cryptogram - Decentralized Social Media web app using Ethereum Blockchain
Blockchain-Cryptogram - Decentralized Social Media web app using Ethereum Blockchain

Decentralized Social Media web app using Ethereum Blockchain. Team Details Team

Owner
Milaham
I'm a programmer, web developer and tech enthusiast
Milaham
React Translator is a Web Interface created for make the creation of locales.json more easier.

React Translator is a Web Interface created for make the creation of locales.json more easier. Theses locales files can be used in the package @oneforx/react-translator

null 1 May 27, 2022
a simple dapp login interface made it with react-ts-chakra-ui and usedapp

a simple dapp login interface made it with react-ts-chakra-ui and usedapp

Sergio 1 May 5, 2022
The LinkedIn Learning course React.js: Building an Interface

React.js: Building an Interface This is the repository for the LinkedIn Learning course React.js: Building an Interface. The full course is available

MOHAMMED KHORMI 1 Oct 14, 2021
Uses TypeScript and Proxy to dynamically construct a lens-like interface for your application state.

Lenses in React Uses TypeScript and Proxy to dynamically construct a lens-like interface for your application state. Example You can construct a lens/

Gabe Scholz 13 Feb 24, 2022
A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface

Trello Board ?? A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface (basically a trello clone

Nishant Mogha 7 Dec 22, 2022
A React Typescript search interface for the popular Giphy.com service.

giphy-search A React Typescript search interface for the popular Giphy.com service. Lets get to it Scope We want you to create a search interface for

null 1 May 18, 2022
React-NFT-App - NFT-Web-Application built using Third web , ReactJs and use Crypto Punks with API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Ali Aftab Sheikh 8 Oct 24, 2022
Generate fun kaleidoscope for user avatars.

React Avatar Generator This was inspired by an old website called LayerVault. You can see an example of how that used to look like here. Getting Start

Joseph Smith 54 Dec 5, 2022
User-friendly query builder for React

react-awesome-query-builder User-friendly React component to build queries. Inspired by jQuery QueryBuilder Using awesome Ant Design v4 for widgets No

Denis Oblogin 1.4k Jan 9, 2023
:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

Inferno 15.6k Jan 1, 2023