SQL Editor

Table of Contents

1. About the Project
2. Features
3. Demo Video
4. Technologies Used
5. Process Followed
6. Performance Metrics
7. Optimization Methods
8. References
9. Thank Note

About the Project

This project is an intuitive SQL Editor Tool. It provides a comprehensive solution for executing SQL queries, analyzing data, and managing database operations effectively.

Features

1. Code Editor: Enables SQL query writing and execution.
2. Query History: Enables viewing and reusing of past SQL queries.
3. Table Access: Easy access to available tables for data selection.
4. Import Query: Allows importing of SQL queries from local files.
5. Search Through Tables: Provides search functionality to easily find tables.
6. Query Execution Time: Tracks the time taken to execute each query.
7. Export Option: Enables exporting of query results in CSV or JSON format.
8. User-friendly UI: An intuitive design for data analysts to navigate effortlessly.

Demo Video

Screen.Recording.2023-08-29.at.5.18.06.PM.mp4

Technologies Used

• React.js: A JavaScript library for building user interfaces.
• Emotion: CSS-in-JS library that uses JavaScript.
• MUI (formerly Material-UI): A widely used components library for React.js.
• Ace-builds (code editor): Embeddable code editor written in JavaScript.
• Vite.js: A next-generation frontend tooling that offers faster and leaner development.
• styled-components: Visual primitives for the component age. Write CSS in JS.
• ESLint: A tool for linting JS code.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.

Process Followed

Performance Metrics

Usual improvement methods:

• Code splitting
• Used Key in Lists
• Used Memoization
• Used Fragment
• Used React.lazy
• Avoid inline css as much as possible
• Avoid unnecessary re-renders with useCallback and useMemo
• Very few extra elements in dom apart from data.json

References

• React Docs
• Programiz SQL Editor for UI and features reference
• PopSQL webapp for UI and features reference
• Vite.js Docs

Thank Note

To Atlan Team 💫🚀, Thank you so much for this opportunity and being patient throughout this assignment.

(Commit messages are Optional)

Type	Version Bump	Description and used for
feat	minor	New features
fix	patch	Fixing bugs
revert	patch	Reverting commits
perf	patch	Performance improvements
refactor	patch	Refactoring code without changing functionality
build	patch	Build-system changes (deps, webpack, etc.)
chore	patch	General chores like version bump, merges, etc
ci	patch	CI/CD related changes
docs	none	Documentation
test	none	Adding/improving tests
style	none	Code-style, formatting, white-space, etc