A contact app built with Solid.js, Vite, Hope UI and Typescript.

Overview

Solid Contacts

Solid Contacts is a contact app to learn more about concepts like Solid.js (router / store / resources / reactivity), Vite and Hope UI.

Live demo here.

Table of Contents

General Information

Solid Contacts is a contact app to learn more about concepts like Solid.js (router / store / resources / reactivity), Vite and Hope UI.

I tried to use latest versions of the technologies to stay up to date with them.

Technologies Used

  • Solid.js (with typescript)
    • solid-js/store as a state manager
    • Hope UI for UI library
    • Randomuser.me API to fetch random contacts
    • solid-router to achieve route management across app
  • API
    • Pagination
    • Cache
  • Vite
    • vite solid plugin

Setup

First, clone the repository:

git clone https://github.com/berkaycimsir/solid-contacts.git <directory_name>

Second, go to the project folder and install dependencies:

yarn install

Finally, you can start the project by running:

yarn dev

Project Status

Project is: completed

Contact

Created by @berkaycimsir - feel free to contact me!

👤 Berkay Çimşir

Show your support

Give a ⭐️ if this project helped you!

You might also like...

This restaurant project is a SPA (single-page application) website. The user can navigate between the home, menu and contact page. I used the MealDB API to display some menu items.

This restaurant project is a SPA (single-page application) website. The user can navigate between the home, menu and contact page. I used the MealDB API to display some menu items.

Fresh Cuisine This restaurant project is from the Odin Project and it is a SPA (single-page application) website. The user can navigate between the ho

Nov 2, 2022

Awesome Books is a basic website that allows users to add/remove books from a list (including the title and author). It has threee different sections: 1. books list, 2. add new book, 3. contact.

awesomeBooks-modules Awesome Books is a basic website that allows users to add/remove books from a list (including the title and author). It has three

Aug 26, 2022

GatsbyContactFormBasedOnFormikAnalysis - This is example contact form for gatsby framework.

Gatsby minimal starter 🚀 Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Jan 2, 2022

This is personal portfolio website that features the projects I have been working on, all the contact information is provided as well.

This is personal portfolio website that features the projects I have been working on, all the contact information is provided as well.

Personal-Portfolio This is personal portfolio website. Built With React CSS VS code Live Demo Live Demo Getting Started Prerequisites: Create an accou

Jan 6, 2023

This is smart contact game with random winner.

Game of Chance This is smart contract that deploys on blockchain. This is the game. Winner is selected randomly. Requirements: Yarn Node.js HardHat Qu

Sep 15, 2022

A complete guide for learning Object Oriented Programming Pillars, SOLID Principles and Design Patterns with TypeScript!

A complete guide for learning Object Oriented Programming Pillars, SOLID Principles and Design Patterns with TypeScript!

Object Oriented Programming Expert With TypeScript This repository is a complete guide and tutorial for the principles and techniques of object-orient

Dec 29, 2022

Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨

solid-custom-navigation Get, Set, Go! Custom navigations for Solid, written in Typescript. Implement custom page transition logic and ✨ animations ✨ .

Nov 27, 2022

Playground for studying design patterns, solid principles, GoF, testing and more with TypeScript

TypeScript design patterns study Playground for studying design patterns, solid principles, GoF, testing and more with TypeScript Index TypeScript des

Dec 9, 2022

Easily add aspect ratio in your Solid app.

Easily add aspect ratio in your Solid app.

Creates a component with a proportional relationship between its width and height. ratio = width / height Table of Contents Demo Installation Setup Us

Nov 4, 2022
Owner
Berkay Cimsir
Javascript, Typescript developer. React.js and Graphql enthusiast.
Berkay Cimsir
Gatsby-Formik-contact-form-with-backend-panel - Full working contact form with backend GUI panel.

Gatsby minimal starter ?? Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Bart 1 Jan 2, 2022
A SolidJS template built with Hope-UI

solid-hope-admin 名称 简介 solid JavaScript框架 hope-ui UI组件库 solid-app-router 路由 vite-plugin-pages 自动生成文件路由 query-string 解析URL地址 steeze-ui/solid-icon 图标 功能

null 9 Dec 13, 2022
fardin 8 Oct 18, 2022
This project is a boilerplate for Next and TypeScript projects. This template was built with Vite, TypeScript and Stitches.

Awesome Template Stitches — NextJS, TypeScript, Stitches and Design Tokens Summary About this template Avaliale scripts Other scripts available Main t

Diego Silva 14 Dec 29, 2022
💌 A simple contact form that helps people send you a message. 📩 to your email. - built with JavaScript/Nodemailer 📃

Implementation using async/await: app.js const contactForm = document.querySelector(".contact-form"); let name = document.getElementById("name"); let

Tobi Adesokan 8 Aug 17, 2022
Build homes, communities and hope through a virtual house-building game that mirrors the experience of physical volunteering programmes.

Habitat Heroes Note: The current house building time and quiz reset time have been shortened for the purpose of allowing users to try out more feature

Habitat Heroes 4 Mar 15, 2022
This is my first attempt in creating a mern stack ecommerce website. Hope you like it!!

MERN E-COMMERCE PROJECT Hi! My name is Suhrrid Banerjee, This is my first attempt in creating a MERN stack e-commerce website. Prerequisite Nil Env Va

Suhrrid Banerjee 1 Jan 8, 2022
A new way to share your readings with friends. Hope you like it!

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

Gardenia Georgia 4 Sep 9, 2022
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022